ANCHOR LINK FIX

固定ヘッダーで隠れる見出しは、scroll-margin-topで整える

ページ内リンクで移動したとき、見出しがヘッダーの下に隠れることがあります。全体なら scroll-padding-top、個別なら scroll-margin-top で停止位置を調整できます。

Before / After 個別の到達先だけ、停止位置を変えます

Before 見出しが隠れる

Overview

固定ヘッダーがあるページで、ページ内リンクを使います。

そのまま移動すると、到達先が一番上に揃います。

見出しの位置がヘッダーの下に入り込みます。

下の余白は、スクロール位置の確認用です。

After 少し下で止まる

固定ヘッダーがあるページで、ページ内リンクを使います。

到達先の要素側に、停止位置の余白を持たせます。

見出しがヘッダーに隠れず、読み始めやすくなります。

下の余白は、スクロール位置の確認用です。

Core CSS

html {
  scroll-padding-top: 80px; /* ページ全体 */
}

.anchor-target {
  scroll-margin-top: 80px;
  /* 到達先ごとに個別調整 */
}

Point

全体なら scroll-padding-top、個別なら scroll-margin-top と考えると使い分けやすいです。