scroll-behaviorの使い方 CSSだけでスムーススクロール！

よく使う「トップに戻る」以外にページ内リンクがない場合は､以下のようにJavaScriptを書きます｡

<script>
window.addEventListener("load", function() {
  document.querySelector("#pagetop").addEventListener("click", function (e) {
    e.preventDefault();
    document.querySelector("#top").scrollIntoView({ behavior: "smooth" });
  });
});
</script>

ページ内の目次などがありページ内リンクが複数ある場合は､以下のようにJavaScriptを書きます｡

<script>
window.addEventListener("load", function () {
  var nodelist = document.querySelectorAll('a[href^="#"]');
  var node = Array.prototype.slice.call(nodelist, 0); 

  node.forEach(function (elem, index) {
    elem.addEventListener("click", function (e) {
      e.preventDefault();

      var href = elem.getAttribute("href");

      document.querySelector( href ).scrollIntoView({ behavior: "smooth" });
    });
  });
});
</script>

jQueryを使えばもっと簡単に書けると思いますが､「scroll-behavior」を使うこと自体が読み込み速度改善､軽量化が目的なのでjQueryは使わないものとします｡

「querySelectorAll」で複数のセレクタを指定するのがわかりにくですが､aタグでhref属性が#ではじまるものすべてを取得するということになります｡

普通にforEachさせようとするとIEではうまく動かないのでひと手間掛ける必要があります｡
以下の記事を参考にしました｡

このあたりは､scroll-behaviorだけの問題ではなくJavaScriptとIEの問題なので､覚えておくと別のことでも使うことができます｡

ヘッダーやナビゲーションを固定(fixed,sticky)させて､そこを移動先に指定していませんか？

これは､scroll-behaviorを使うときだけでなく､JavaScriptを使ったsmooth scroll全般にいえることです｡

ヘッダーをブラウザ上部に固定していれば､移動先がすでに見えているので目的地に移動する必要がなく動かないのは当然です｡
ヘッダーを上部に固定させる場合は､絶対に動かないbodyを移動先に指定することで動くようになります｡

POINT

ヘッダーを上部に固定させた場合は､ページ内リンクの移動先にできないので､固定させてないbodyなどを移動先に指定する｡