【JavaScript】 クリックすると画面の一番上までスクロールする仕様

この記事では、クリックすると画面一番上までスクロールする仕様について説明します。
JavaScriptを使用しております。

コードについて

コードは、こちらになります。
仕様を紹介するので、なるべくコードは簡潔なものにしてあります。

window.scroll()について

ボタンにaddEventListenerを付与する仕様にしてあります。
JSにてwindows.scroll()がありますが、こちらは絶対指定でスクロールするメソッドです。
今回のコードは、こちらになります。

  window.scroll({
    top: 0,
    behavior: "smooth",
  });

これは、top(上から)0pxの位置に、スクロールはスムーズに移動させるオプションです。
※topのオプションにはpxは不要です。


behaviorのオプションは"smooth"のほかに、"auto"と"instant"があります。
"auto"はデフォルトで設定されるオプションです
"auto"と"instant"は同じ挙動で、目的の位置まで瞬間的に移動します。

終わり

以上、コードの紹介でした。