jQueryで「トップへ戻る」ボタンを少しスクロールで表示
はじめに
縦長になるWebサイトでは、ページ上部へ移動するための「トップへ戻る」ボタンをよく見かけますね。ちょっとした機能ですが、あると便利なので当サイトにも設置しています。
そのボタンですが必要になるのは、ある程度下にスクロールしてからになります。
今日は jQuery を使って、その「トップへ戻る」ボタンを少しスクロールしたあとに表示する方法をご紹介します。またビギナーの方向けに、そのコードを例として、より良いコードを書くためのポイントもご紹介します。
今回使用した jQuery のバージョンは 3.4.1 です。
1. 実装方法
HTMLとCSS、そしてJavascriptのコードは以下の通りです。
<body id="top">
<!-- ここにコンテンツが入ります -->
<a href="#top" id="btn">ページTOPへ戻る</a>
</body>
#btn {
display: none;
/* 画面左下に表示 */
position: fixed;
right: 10px;
bottom: 10px;
/* 見た目 */
background-color: #333;
color: #fff;
padding: 7px 10px;
}
$(function() {
const $btn = $("#btn");
const fadeMsec = 500;
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$btn.fadeIn(fadeMsec).css("display", "block"); // css() しないと inline になる
} else {
$btn.fadeOut(fadeMsec);
}
});
});
$(window).scroll() は、スクロールを行ったときに発火するイベントです。
$(this).scrollTop() はスクロールの位置(Y座標)を取得できます。ここでは 200 を超えたらボタンを表示するようにしています。
fadeIn()、fadeOut() はその名の通りで、対象要素を徐々に表示/非表示する関数です。変数 fadeMsec には ミリ秒 が入っていて、ここでは 0.5 秒かけて表示を切り替えています。
2. より良いコードを書くためのポイント
上記 Javascript のソースを元に、より良いコードを書くために注意するポイントをご紹介します。
結論からいうと「不要な処理をループに含めない」です。
今回掲載したコードは下記のように書いても、同様に動作します。
$(function() {
$(window).scroll(function() {
const $btn = $("#btn");
const fadeMsec = 500;
if ($(this).scrollTop() > 200) {
$btn.fadeIn(fadeMsec).css("display", "block"); // css() しないと inline になる
} else {
$btn.fadeOut(fadeMsec);
}
});
});
異なっているのは $btn と fadeMsec を宣言している箇所です。
$(window).scroll() はスクロールをする度に発火するので、その度に $("#btn") が実行されます。ここでは、$("#btn") の結果は不変なので、何度も実行する必要はありません。今回は $(window).scroll() の外に出すのが良いでしょう。
「変数は使用する直前で宣言するのが良い」という教えもあって、ついついループの中に不要な処理を入れてしまう場合があります。当該箇所のコードが完成したら一度立ち止まって、ループの中に不要な処理がないか確認してみるといいと思います