改良点ありありですが途中まで。
ちょいジャンプして引っ込むやつ
某幼稚園参照

----------------html部分-----------------------
<p id="gotop2" style="z-index: 1;bottom: -120px;">
<a href="#header" title="" class="btnTop" ><img src="go_to.png" alt=""/ ></a>
</p>
-----------------------------------------------

----------------script&CSS部分-------------------
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script>
$(function() {
    var showFlug = false;
    $('#gotop2').css('bottom', '-120px');
    var showFlug = false;
    //スクロールが400に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            if (showFlug == false) {
                showFlug = true;
                $('#gotop2').stop().animate({'bottom' : '0px'}, 300);
            }
        } else {
            if (showFlug) {
                showFlug = false;
                $('#gotop2').stop().animate({'bottom' : '-200px'}, 200);
            }
        }
    });
    $('.btnTop').click(function () {
        $('#gotop2').animate({'bottom': '30px'}, 400, 'easeOutBack');
        $('#gotop2').animate({'bottom': '-200px'}, 200, 'easeOutBack');
        $('body,html').delay(200).animate({
            scrollTop: 0
        }, 10, 'easeInOutCirc');
        return false;
    });
});
</script>
<style>
#gotop2 {
    position:fixed;
    bottom: 0px;
    right: 0px;
  z-index:1;
}
</style>
----------------------------------------------