今回は、CSSのみでページ内リンクのスムーズスクロールを実装する方法です。
jQueryなどは使いません！便利！
CSSのscroll-behaviorとscroll-padding-topを使用して、スムーズスクロール＋固定ヘッダーの下にコンテンツが隠れてしまわないようにするための実装方法をご紹介します。
目次
scroll-behavior とは
scroll-behavior は、ページ内のスクロールの動き（スムーズスクロールなど）を指定するためのプロパティです。
このプロパティを使用すると、ページ内のリンクやスクリプトによるスクロールをスムーズにすることができます。
利用可能な値
- auto: デフォルトのスクロール動き。
- smooth: スムーズにスクロールする。
scroll-behavior の使い方
html {
scroll-behavior: smooth;
}上記のように指定することで、ページ内のアンカーリンクやscrollIntoView()メソッドなどによるスクロールがスムーズになります。
scroll-padding-top とは
scroll-padding-top は、ビューポートの上辺からのスクロールスナップ領域までの距離を指定するプロパティです。
スクロールスナップが有効な場合に、特定の要素がビューポートの上端から一定の距離を保つようにするために使用します。
固定ヘッダーがある場合は、スクロールスナップを使用してもヘッダーの下にコンテンツが隠れてしまわないようにするためにこのプロパティを使用すると良いです。
scroll-padding-top の使い方
html {
scroll-padding-top: 80px; /* ヘッダーの高さを指定する */
}上記のように指定することで、scroll-padding-topを適用する要素にヘッダーの高さを指定できます。
両方セットで実装
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}簡単で便利なのでぜひ使ってみてください！
