[JavaScript]ページ内リンク（アンカーリンク）をスクロールさせる

アンカーリンクをクリックしたときにススーッとスクロールさせます。
このサイト全体に実装しているので、上記の目次で試すことができます。

CSSを使った記事はこちら。

CSSのみでスムーススクロールする方法を紹介します。JavaScriptを使った記事はこちら。CSShtml { scroll-behavior: smooth;}「scroll-behavior...

HTML
JavaScript
polyfillを使用する

HTML

<a href="#s1">section1</a>
<a href="#s2">section2</a>
<a href="#s3">section3</a>

JavaScript

const gap = 10;
const anchorElements = document.querySelectorAll('a[href^="#"]');

if (anchorElements) {
  anchorElements.forEach(anchorElement => {
    anchorElement.addEventListener('click', (e) => {
      e.preventDefault();
      const targetId = anchorElement.getAttribute('href').replace('#', '');
      const target = document.getElementById(targetId).getBoundingClientRect().top + window.pageYOffset;
      window.scrollTo({
        top: target - gap,
        behavior: 'smooth'
      });
    });
  });
}

要素の存在チェックをしているので、とりあえず全ページに実装してもエラー等は発生しません。
（変数名被りには気をつけましょう。）

const gap = 10;

スクロールした後、ブラウザ上部から目標要素までの位置をpxで設定します。
目標要素がブラウザ上部にピッタリくっついてしまうと格好悪い場合も多いです。
また、固定ヘッダーを使用している場合は、固定ヘッダー分のgapを空けないとスクロールした後隠れてしまったりします。
ヘッダーの高さを取得して設定するなどもありです。