jQueryで「トップへ戻る」ボタンを少しスクロールで表示

はじめに

縦長になるWebサイトでは、ページ上部へ移動するための「トップへ戻る」ボタンをよく見かけますね。ちょっとした機能ですが、あると便利なので当サイトにも設置しています。

そのボタンですが必要になるのは、ある程度下にスクロールしてからになります。

今日は jQuery を使って、その「トップへ戻る」ボタンを少しスクロールしたあとに表示する方法をご紹介します。またビギナーの方向けに、そのコードを例として、より良いコードを書くためのポイントもご紹介します。

今回使用した jQuery のバージョンは 3.4.1 です。

目次
  1. 実装方法
  2. より良いコードを書くためのポイント

1. 実装方法

HTMLとCSS、そしてJavascriptのコードは以下の通りです。

index.html
<body id="top">
  <!-- ここにコンテンツが入ります -->

  <a href="#top" id="btn">ページTOPへ戻る</a>
</body>
style.css
#btn {
  display: none;
  /* 画面左下に表示 */
  position: fixed;
  right: 10px;
  bottom: 10px;
  /* 見た目 */
  background-color: #333;
  color: #fff;
  padding: 7px 10px;
}
main.js
$(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 のソースを元に、より良いコードを書くために注意するポイントをご紹介します。
結論からいうと「不要な処理をループに含めない」です。

今回掲載したコードは下記のように書いても、同様に動作します。

main.js ※よくない例
$(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() の外に出すのが良いでしょう。

「変数は使用する直前で宣言するのが良い」という教えもあって、ついついループの中に不要な処理を入れてしまう場合があります。当該箇所のコードが完成したら一度立ち止まって、ループの中に不要な処理がないか確認してみるといいと思います