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

投稿日：

更新日：

実装方法

ページ全体のスクロールを滑らかにするscroll-behavior: smooth;を追加。

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

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

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

この記事をシェアする