jQueryで実装する、スクロールに応じて表示されるトップへ戻るボタン

HTML

<div id="js-back-to-top" class="c-back-to-top">
    <div class="c-back-to-top__button">TOP</div>
</div>

CSS

.c-back-to-top {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
}

.c-back-to-top__button {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
}

JavaScript

  const $backToTop = $("#js-back-to-top");

  $(window).scroll(function () {
    if($(this).scrollTop() > 80){
        $backToTop.fadeIn(300);
    } else {
        $backToTop.fadeOut(300);
    }
  });

  $backToTop.on("click" ,function () {
    $("html, body").animate({ scrollTop: 0 }, 500);
  });

const $backToTop = $("#js-back-to-top");

・idがjs-back-to-topの要素を取得して、変数$backToTopに格納する。
・変数の先頭に$を付けているのは、jQueryオブジェクトであることを明示するため。

  $(window).scroll(function () {

・スクロールイベントを監視する。
・ユーザーがスクロールすると、中の処理（関数）が実行される。

if($(this).scrollTop() > 80){

・$(this)は現在のイベントが発生した対象(ここではwindowオブジェクト)を指す。
・scrollTopメソッドは現在の位置（上から何ピクセルスクロールしたか）を取得する。
・> 80 → 80px以上スクロールしたらボタンを表示する条件。

$backToTop.fadeIn(300);

・300ms（0.3秒)かけて要素を表示するアニメーション。
・つまり、80px以上スクロールしたらボタンが表示される。

  } else {
    $backToTop.fadeOut(300);
  }

・300ms（0.3秒）かけて要素を非表示にするアニメーション。
・elseがあるので、スクロール位置が80px未満でボタンが非表示になる。

 $backToTop.on("click" ,function () {
    $("html, body").animate({ scrollTop: 0 }, 500);
  });

・$backToTopに対して、クリックイベントを設定。
・$("html, body")をセレクタに指定しているのは、ページ全体を対象にする必要があるため。ブラウザによってscrollTopを適用すべき対象が違うのでhtmlとbodyの2つを指定している。Webkit系（Chrome、Safari、Edge）ではbody、Firefoxではhtmlに適用される。
・ボタンをクリックするとTop位置まで500msのスピードでゆっくりと移動する。