【便利機能】WEBページに「スクロールトップボタン」を追加する方法

「スクロールトップボタン」とは、押すことで、そのページの1番上に移動するボタンのことです。
この記事では、そのボタンの追加方法を解説します。

<a href="#" class="back-to-top js-to-top">▶TOP</a>

まずHTMLファイルに上記コードを追加しましょう。

$(function () {
  // スクロールしたら「トップに戻る」ボタンが表示される
  const toTopButton = $(".js-to-top");
  const scrollHeight = 100;
  toTopButton.hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      toTopButton.fadeIn();
    } else {
      toTopButton.fadeOut();
    }
  });

  // 「トップに戻る」ボタンをクリックしたらスクロールで戻る
  toTopButton.click(function () {
    $("body,html").animate({ scrollTop: 0 }, 800);
    return false;
  });
});

次にJavaScriptファイルに上記コードを追加します。
これだけで「▶TOP」というボタンを押すと
そのページの1番上に移動するようになります。

参考サイト