【HTML・CSS・Javascript】300ピクセル下にスクロールしたら画面外から出てくるページトップに戻るボタンを作る

NOTE上で説明する時に簡単なコードなどを書くための練習です。
サンプルとして、300ピクセル下にスクロールしたら画面外からページトップに戻るボタンが出てくるコードを貼り付けてみます。

300ピクセル下にスクロールしたらページトップに戻るボタンが出てくる仕組み

Javascript

function scrollFunction() {
  const this_y = window.pageYOffset;
  if (this_y > 300) {
    document.getElementById("pagetop").classList.add("js-active");
  } else {
    document.getElementById("pagetop").classList.remove("js-active");
  }
}

/* スクロールした時にfunctionを実行する */
window.onscroll = function () {
  scrollFunction();
}

window.pageYOffsetを使用して縦のスクロール量を取得します。
このスクロール量が300以上ならpagetopのidにjs-activeのクラスを付けるようにします。

HTML

<a href="#" id="pagetop" class="pagetop"></a>

HTMLはidとclass両方用意しました。
個人的にidにはCSSを入れないようにしているので、CSSはclass側で指定します。
今回はテストのため、aタグの中には何も入れていません。CSSでボタンを生成します。

SCSS

html {
  scroll-behavior: smooth;
}
.pagetop {
  display:flex;
  justify-content: center;
  align-items:center;
  position:fixed;
  bottom:20px;
  right:20px;
  width:60px;
  height:60px;
  z-index:9999;
  border-radius:50%;
  background:#333;
  transform: translateY(100px);
  transition: transform 0.5s;
  &.js-active {
    transform: translateY(0);
  }
  &::before {
    content:"";
    display:block;
    width:20px;
    height:20px;
    margin-top:5px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(-45deg);
  }
}

CSSはSCSSで記載しています。
まずは、scroll-behavior: smooth;でページ内のアンカー移動をスムーズスクロールさせるようにします。
.pagetop内は通常のボタンを作成しています。transitionでtransformの変化をアニメーションするように設定することで、画面内に出たり入ったりする処理がアニメーションになります。
ちなみに、::beforeで上向きの矢印を作成しています。
.pagetop.js-active（pagetopとjs-activeが同時にclass指定されたとき）のCSSで画面内に表示されるようにtransformで移動させるCSSを設置します。
このようにすることにより、javascriptでclassが付いたり消えたりすることでCSSアニメーションが行われるようになります。

このような感じで、時々思い出したようによく使う物をメモしておこうと思います。