素のJSでのスムーススクロール

どうしたいか

ページ内リンクをスムーズなアニメーションでスクロールさせたい。

条件

• スムーズな動作であること
• jQueryやライブラリは、不必要に用いないこと
• なるだけシンプルに、汎用的な構造にすること

どうしたのか

window.scrollを用いて解決しました。
MDNから引用しますと下記の部分です。

スクロールの動作を変更する
スクロールの仕方を変えたいなら、options で指定してください

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

プロパティについて

プロパティ	説明
top	左上を基準とした、表示させたい文書の水平軸上のピクセル
left	左上を基準とした、表示させたい文書の垂直軸上のピクセル
behavior	smooth、 instant、 auto のうちどれか一つを含む文字列。初期値は auto

※behaviorのinstantはautoと同動作で、一瞬で移動します。基本、smoothかautoかのどちらかを選択する形になるのかなと思います。

例

ページトップのボタンしかないし、定期的な改修もないよって場合なら、シンプルにこれだけで大丈夫。

index.js

// EventTargetには、対象となる要素の参照を入れください。
EventTarget.addEventListener('click', (e) => {
  e.preventDefault();
  window.scroll({
    top: 0,
    behavior: 'smooth'
  });
});

ただ、ちょっと汎用的とは言い難いので、私の場合は下記のようにしました。

index.js

// aタグ要素の参照を取得
const links = document.querySelectorAll('a[href^="#"]');

// 各aタグにクリックイベントを設定
for ( let i = 0; i < links.length; i++ ) {
  links[i].addEventListener('click', (e) => {
    // デフォルトのイベントをキャンセル
    e.preventDefault();

    // 対象（aタグ）のY軸の絶対座標を取得
    const elemY = links[i].getBoundingClientRect().top;
    // 現在のスクロール量を取得
    const scrollY = window.pageYOffset;
    // 対象までのスクロール量を算出
    const top = elemY - scrollY;

    window.scroll({
      top: top, // スクロール量の設定
      behavior: 'smooth' // スクロール動作の設定
    });
  });
}

最後に

このやり方を知るまでは、velocity.jsを使って、スムーススクロールを実装していました。
簡単なWEBサイトでもjQueryを入れて、前述のvelocity.jsを入れて・・・。ということをしていたので、かなり無駄なことをしていたなと思います。

ちなみにこのやり方は、今どきのスムーズスクロール(2019年版) - to-R Mediaでも解説されていました。さすが西畑先生です。