CSSだけでスムーススクロールを実装し、ヘッダーの高さ分だけ余白を確保する

ページ内リンクのスムーススクロールは、以前はJavaScriptで実装していましたが、今はCSSだけで実装できます。scroll-behaviorとscroll-margin-topを使います。

ページ全体のスクロールを滑らかにするために、htmlにscroll-behavior: smooth;を指定します。

アンカーリンクをクリックすると、href属性に対応するIDを持つ要素が:targetで選択されます。その要素にscroll-margin-topを指定して、ヘッダーの高さ分の余白を確保します。値には、ヘッダーの高さを入れたカスタムプロパティ--headerHeightを使っています（カスタムプロパティを使わずに固定値でも良く、カスタムプロパティの名前も任意です）。

1html {2  scroll-behavior: smooth;3}4:target {5  scroll-margin-top: var(--headerHeight, 0px); /* ヘッダーの高さ分の余白を確保 */6}

ヘッダーの高さを常に更新する方法は、以下の記事で解説しています。

JavaScriptでCSSのカスタムプロパティを設定・取得する

OSで「視差効果を減らす」などの、動きを減らす設定をしている人には、スムーススクロールを止めておくと親切です。prefers-reduced-motionのメディアクエリを使って、動きを減らす設定をしていない場合だけ、スムーススクロールを有効にします。

1@media (prefers-reduced-motion: no-preference) {2  html {3    scroll-behavior: smooth;4  }5}

scroll-behaviorはSafari 15.4から、scroll-margin-topはSafari 14.1から対応しています。ChromeとFirefoxは、どちらもそれより前から対応しています。

• scroll-behavior - CSS | MDN⁠（新しいタブで開く）
• scroll-margin-top - CSS | MDN⁠（新しいタブで開く）
• CSS prefers-reduced-motion メディア特性 - CSS | MDN⁠（新しいタブで開く）