【CSS】ページ内リンクでターゲットの位置を簡単に設定する方法

ターゲットにidを付与してページ内遷移をする際、遷移先のコンテンツが画面上のギリギリで表示されたり、固定ヘッダーがあるとコンテンツの頭がヘッダー下に隠れてしまいます。

従来はターゲットの少し上に到着するようにjQueryを使って設定していましたが、CSSのみで簡単に設定できる方法があったのでご紹介します。

CSSのみで遷移先ターゲットの位置を指定

下記の記述を加えるだけで、ターゲットの位置を指定することができます。
scroll-padding-topの値は適宜変更してください。

html {
 scroll-snap-type: y proximity;
 scroll-padding-top: 100px;
}