【JavaScript】汎用的なsmooth scroll（2021年）

スムーススクロールを実装する際、どのような技術や手順で作れば良いかいつも迷ってしまうので、備忘録としてまとめます。この記事ではnpmパッケージやjQueryなどのライブラリは使わずに実装します。

作成するスクロール

• 「ページの先頭へ戻る」的なページ最上部へ戻るボタン
• ページ内リンク

使用する技術

• [Polyfill.io](https://polyfill.io/v3/)
• Element.scrollIntoView()
• window.scrollTo

smooth srcollを標準APIで実現するには、IE11やSafari(Mac OS/iOS)が対応していないbehaviorオプションを使用するため、Polyfill.ioでsmoothscrollという項目を選択したバンドル（URL）を作成します。

【例】（他に必要なpolyfillがある場合は適宜選択してください。）

https://polyfill.io/v3/polyfill.min.js?features=smoothscroll

実装

ページ最上部へ戻るボタン

const scrollToTop = () => {

  const anchorButtons = document.querySelectorAll('.js-scroll-to-top');

  if(anchorButtons) {
    anchorButtons.forEach((button) => {
      toTop(button);
    })
  }

  const toTop = (button) => {
    button.addEventListener('click', (event) => {
      // a要素のデフォルトの挙動をキャンセル。
      // button[type="button"]の場合は不要です。
      event.preventDefault();
        window.scrollTo({
          top: 0,
          behavior: "smooth"
      });
    });
  }
}

scrollToTop();

ページ内リンク

const scrollToId = () => {

  const anchorButtons = document.querySelectorAll('.js-scroll-to-id');

  if(anchorButtons) {
    anchorButtons.forEach((button) => {
      toIdElement (button);
    })
  }

  const toIdElement = (button) => {
    // アンカーリンクのhrefから、移動先の要素を取得。
    const targetId = anchor.getAttribute('href');
    const target = document.querySelector(targetId);

    button.addEventListener('click', (event) => {
      // a要素のデフォルトの挙動をキャンセル。
      event.preventDefault();
      target.scrollIntoView({
        behavior: "smooth",
      });
    });
  }
}

scrollToId();