Topへ戻るボタンの作成〜jQuery

長いページでは必須のTopへ戻るボタンですね。
スクロールするとTopボタンが出現し、クリックすると緩やかにTopに戻ります。
この動きはCSSとjQueryで実現できます。easingなどを好みで脚色してください。

Topへ戻るボタンのサンプル

CSSコード

div#pagetop {
     display: none;
     position: fixed;
     right: 20px;
     bottom: 20px;
     z-index: 100;
}
div#pagetop a {
     height: 50px;
     width: 50px;
     line-height:50px;
     text-align:center;
     text-decoration: none; 
     background-color:#FCF;
     display: block;
     border:1px solid #F6F;
     border-radius: 50px;
}

jQueryソース

jQuery(function($){
    $('body').append(
        $('<div id="pagetop">')
        .append(
            $('<a href="#">Top</a>')
            .click(function(){$('html,body').animate({ scrollTop:0}, 1000); return false})
            )
        );
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            $('#pagetop').fadeIn();
        } else {
            $('#pagetop').fadeOut();
        }
    });
});