リンク先の見出しが隠れる？scroll-margin-topで移動後の位置を調整しよう

目次から見出しへ移動したら、上に重なるヘッダーで題名が読めない。見出し自体へ大きな余白を入れる前に、スクロール後の位置を調整する方法を試してみよう。

この記事では、スクロールする小さな枠と、その上端に残る見出しバーを使う。作例内だけの比較なので、サイトの設定やブラウザの既定動作を変更する必要はないよ。

見出しが消えたのではなく、重なっている

固定・追従するヘッダーが前面にあると、移動先の見出しがその下へ入る場合がある。ページ内リンクが壊れたと思う前に、実際の移動先と重なっている要素を確かめよう。

scroll-margin-topは、スクロールで対象を見せるときに考慮する上側の余白を指定する。通常のレイアウトで、見出しの周りへ同じ高さの隙間を常に作るmargin-topとは役割が違うよ。

.section-heading {
  scroll-margin-top: 56px;
}

この56pxは作例用の値。実サイトではヘッダーの高さと、見出しの周りに欲しい余白から考える。画面幅によってヘッダーが二段になる場合も、同じ値で足りるとは限らない。

ページ内の作例を動かす

1. 余白を付けない状態で「見出しへ移動」を押す。
2. 小さな枠の上端で、見出しがバーの下へ入ることを見る。
3. 「上側に56pxの余白」を有効にして、もう一度移動する。
4. 見出しの上に空きができ、読める位置へ来ることを確認する。
5. リセットで、余白なし・枠の一番上へ戻す。

編集部では、見出しと枠の座標をブラウザで測り、余白なしでは上端へ、指定ありでは56px下へ配置されることを確認した。作例のボタンは、ブラウザのscrollIntoViewで対象を先頭へ寄せているよ。

どの要素がスクロールしている？

ページ全体が動くのか、内側の枠が動くのかも分けよう。対象の見出しへscroll-margin-topを指定する方法と、スクロールする側へscroll-padding-topを指定する方法は、置く場所が違う。

両方へ値を入れていると、意図より大きく空く場合もある。一つずつ設定を確認して、見た目が合った理由を説明できる状態にしたいね。

必ずぴったり同じ位置になる？

ページ末尾の近くでは、その下に十分な内容がなく、それ以上スクロールできない場合がある。横書き・縦書き、移動時のblockやinlineの指定なども関わるので、数値だけで結果を保証しない。

この指定は、キーボードのフォーカス管理や見出しの意味付けをすべて代わりに行うものでもない。移動後に今いる場所が分かるか、戻る操作が自然かも確認しよう。

追従する枠の仕組みはstickyの確認、見出しの意味は見出し構造の基本へ。

参照した公式資料

• MDN：scroll-margin-top
• MDN：scrollIntoView

確認日：2026年10月26日。