TOCジャンプで見出しが隠れるときはscroll-marginの二重適用を疑う

自分のブログにsticky headerと目次（TOC）を実装すると、TOCのリンクをクリックしたときに見出しの上部がヘッダーに隠れてしまうことがあります。ジャンプ先は合っているのに、実際に読みたい見出しが隠れて見えない、という体験は初心者が気づきにくい不具合です。

この記事では、原因の切り分け方と、scroll-margin-topでの直し方、そして二重適用という見落としやすい落とし穴を紹介します。

今日の結論

• stickyヘッダーがあるページでTOCをクリックすると、見出しがヘッダーに隠れることがある
• 対処は見出し側のscroll-margin-top（例: 4.5rem）で十分なことが多い
• htmlのscroll-paddingと見出しのscroll-marginを両方足すと、止まり位置が下にずれすぎる
• 効かないときは、まず「二重適用」を疑う

なぜ見出しが隠れるのか

TOCのリンクをクリックすると、ブラウザはアンカー機能によって、対象の見出し要素の上端がビューポートの上端に来るようにスクロールを止めます。sticky headerがコンテンツの上に固定表示されていると、この「ビューポートの上端」を実際にはヘッダーが覆っている状態になり、見出しがヘッダーの下に隠れてしまいます。

原因は単純、ブラウザの停止位置とヘッダーの表示位置の重なり。

scroll-margin-topで直す

対処は多くの場合、見出し側にscroll-margin-topを設定するだけで十分です。scroll-margin-topは、その要素にジャンプしたときの停止位置に、指定した分だけ上の余白を追加するプロパティです。

手順は次のとおりです。

1. 見出しがヘッダーに隠れているか、あるいは単に余白が大きすぎるだけかを切り分ける
2. 見出しの共通クラス（例: .article-h2）にscroll-margin-topを1つだけ設定する
3. TOCのリンクをクリックし、見出しがヘッダーの直下に見えるかを確認する

.article-h2 {
  scroll-margin-top: 4.5rem;
}

筆者は自サイトのStickyTOC実装を見直す過程で、後述する二重適用の状態からscroll-marginのみに設定を絞り、TOCクリック時の停止位置が見出し直下に戻ることを2026年7月時点で確認しました。

二重適用に注意

scroll-margin-topは見出し側（対象要素）に効くプロパティですが、html要素などスクロールコンテナ側に設定するscroll-padding-topという、よく似た別のプロパティもあります。

この2つは独立して効くため、両方を同時に設定すると、値が足し算されたようにスクロール停止位置がずれます。scroll-paddingとscroll-marginを両方設定していると、停止位置が想定より下にずれすぎることがあるので注意してください。

対処法はシンプルで、どちらか一方だけに絞ることです。ToolArcでは見出し側のscroll-margin-top（4.5rem）のみを使い、スクロールスパイ（現在地判定の仕組み）のオフセットは別途約72pxに設定しています。

実際の設定値の目安

チェックリスト

• 見出しがヘッダーに隠れているか、余白が大きすぎるだけかを切り分けた
• scroll-margin-topを見出し側にだけ設定した
• html側のscroll-padding-topと同時設定していないか確認した
• TOCクリックで見出しがヘッダー直下に見えることを確認した
• スクロールスパイのオフセットも別途調整した

まとめ・次に読む

TOCジャンプで見出しが隠れるときは、まずscroll-marginとscroll-paddingの二重適用を疑うと切り分けが早くなります。見出し側のscroll-margin-topをひとつ設定するだけで直ることが多いです。

Sticky TOCの実装Tipsは/blog/sticky-toc-items-start-tips、記事リードの見せ方は/blog/article-description-cardも参照してください。

本記事の内容は執筆時点（2026-07-26）の情報に基づきます。仕様は変更される可能性があります。重要な判断は公式ドキュメントで確認してください。