WEB帳
jQueryを使用してページのトップへスクロールさせて戻るボタンを設置

たまに投稿記事の内容が多く縦に長くなってしまう場合があるので、GoogleのjQueryを使用してページのトップへ移動するスクロールボタンを設置してみました。

▼ 少しスクロールさせると右下に現れるページトップへスクロールさせるボタン

javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(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;
    });
 
});
</script>

フッターメニューとしてトップへ移動するリンクを固定して表示させる場合は、ボタン表示の開始位置の設定を削除しても大丈夫です。

css

.pagetop {
	display:none;
	position:fixed;
	bottom:25px;
	right:25px;
}
.pagetop a{
	 display:block;
	 padding:5px;
	 background:rgba(0,0,0,0.5);
	 text-align:center;
	 color:#ffffff;
	 text-decoration:none;
}

必要なのは、.pagetopの内容で.pagetop aはお好みでカスタマイズして下さい。

html

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

htmlコードは、好きな個所で大丈夫そうです。自分の場合は、</body>の直前に記述しています。

【参考Webサイト】

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

コメント（0件）

jQueryを使用してページのトップへスクロールさせて戻るボタンを設置に対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

【ソーシャルボタン】

• 
• Tweet