【jQuery】特定位置にスクロールでページTOPへ戻るボタンを表示

2019年4月23日jQuery

【jQuery】特定の位置までスクロールすると出現する「ページTOPへ戻る」ボタンを設置するコード

ホームページやブログによくある、画面を下部へ少しスクロールするとフワッと出現する「ページTOPへ戻る」ボタンを表示、非表示するコードを書いてみました。できるだけ簡潔に、コピペだけで導入できるようにしていますので参考にどうぞ。

DEMO

詳しい動きについては下記の動作デモページを用意しましたのでご確認ください。
※jQuery本体のバージョンは3.3.1を使用しているので、古いバージョンによっては動かない可能性もあります。

» 動作デモページはこちら

下部へ少しスクロール（設定では200px）すると、画面の右下に固定で「ページTOP」へ戻るボタンがフワッと表示されます。また画面上部へスクロールを戻すと消えます。

設置方法

jQuery本体の読み込み

CDNで配布されています。下記コードをそのまま＜head＞内に記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery実行コード

こちらのコードをjQuery本体よりも下部に記述します。

<script type="text/javascript">
    $(function(){
        var amount = 200; //スクロール量（px）
        $('.pagetop').hide();

        $(window).scroll(function(){
            var scrollPoint = $(this).scrollTop();
            (scrollPoint > amount)?$('.pagetop').fadeIn():(scrollPoint < amount)?$('.pagetop').fadeOut():$('.pagetop').show();
        });
    });
</script>

このコードの簡単な解説

3行目ではページTOPへ戻るボタンを表示させるまでのスクロール量をpxで指定します。

６行目以降ではscrollイベント時に.scrollTop()関数で現在のスクロール量を取得し、設定したスクロール量以上であればpagetopクラスをfadeIn、以下であればfadeOutする処理をしています。非常に簡単なコードで導入できますね。

HTML

HTMLはこれだけです。pagetopクラスを画面右下にfixedで固定しています。クラス名などは適宜変更してください。

<div class="pagetop">
    <p><a href="#top">▲ページTOPへ戻る</a></p>
</div>

CSS

こちらも既存クラスなどの状況に合わせてカスタマイズしてください。pagetopクラスの親要素にposition:relativeを指定してください（デモでは大枠をcontainerで囲っています）

.pagetop{
    position:fixed;
    bottom:5px;
    right:5px;
}
.pagetop p a{
    display:block;
    padding:15px;
    background:#fff;
    border:2px solid #131313;
    color:#131313;
    text-decoration: none;
    border-radius:5px;
}
.pagetop p a:hover{
    background:#131313;
    border:2px solid #fff;
    color:#fff;
}

まとめ

こちらも今更感のあるコードですが、コンテンツが長くなりがちなWEBサイトやブログにはできるだけ導入したほうがユーザビリティに良いとされています。ぜひ参考にしてみてください。

コードの間違いや、もっと簡潔にできるなどアドバイスなどがありましたらコメントいただければ大変嬉しいです。宜しくお願いいたします。

jQueryjavascript, jQuery, カスタマイズ, スクロールイベント

Posted by シュウ