【jQuery】topに戻るスクロールボタン

下に長いページだと、トップに戻るのがわずらわしかったりします。
そんな時に使う。

１．まずjQueryをヘッダーに呼び出す。

２．以下のソースを好きな名前をつけjsフォルダに格納し（pagetop.jsとか）ヘッダーで読み込む

$(document).ready(function(){

    var pagetop = $('.pagetop');

    $(window).scroll(function(){
        if ( $(this).scrollTop() > 500 ) {
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });

    pagetop.click(function () {
        $('body, html').animate({ scrollTop: 0 }, 500);
        return false;
    });

});

３．ｈｔｍｌファイルの任意の場所に以下を記述する

<p class="pagetop"><a href="#">▲</a></p>

４.最後にcssで場所の配置、やじるしマークのデザインをする

.pagetop {
 display: none;
 position: fixed;
 bottom: 30px;
 right: 55px;
}
.pagetop a {
 display: block;
 width: 50px;
 height: 50px;
 background-color: #333;
 text-align: center;
 color: #fff;
 font-size: 24px;
 text-decoration: none;
 line-height: 50px;
}

これで、トップに戻るボタンを作成できます

関連記事:

html5のplaceholder ～ フォームテキストが空の時に薄文字でテキストを入れる