リンク先の見出しが隠れる？CSSの scroll-margin-top でひと工夫
目次や「詳しく見る」からページ内リンクを押したら、移動先の見出しが固定ヘッダーの裏に隠れてしまった。制作中に、こんな場面はありませんか？
そんなときは、移動先の要素に scroll-margin-top を指定してみましょう。スクロールでその要素を表示するとき、上側に余裕を持たせるためのCSSです。
リンクを押す側ではなく、移動先に指定
例えば、高さ64pxの固定ヘッダーがあるページで、「料金」の見出しへ移動する場合。HTMLはいつものページ内リンクでOKです。
<a href="#price">料金を見る</a>
<h3 id="price" class="anchor-heading">料金</h3>CSSでは、リンク先の見出しにクラスを付けて指定します。ここではヘッダー64pxに、読みやすさのための余白16pxを足した80pxを例にしています。
.anchor-heading {
scroll-margin-top: 80px;
}通常の margin-top と違い、ページ上の要素間の余白を増やす指定ではありません。見た目のレイアウトを保ちながら、リンクで移動したときの位置を調整できます。スクロールスナップを設定していないページでも使えます。
目次やFAQへのリンクで役立つ
長い記事の目次、サービスページの料金案内、FAQの各質問へのリンクなどに便利です。複数の見出しを移動先にするなら、同じクラスを付けておくとまとめて調整できます。指定するのは、リンクの href に対応する id を持つ要素です。
80pxは例。実際のヘッダーに合わせよう
PCとスマートフォンでヘッダーの高さが変わるなら、メディアクエリなどで値も調整しましょう。ページ末尾のようにスクロールできる距離が足りない場所では、指定した分だけ上に空けられないこともあります。
また、JavaScriptで座標を計算して独自にスクロールさせているサイトでは、その処理の確認も必要です。まずは実際のページ内リンクを押して、PC・スマートフォンの両方で見出しが読める位置に止まるか確認すると安心です。
参考：MDN「scroll-margin-top」 ／ W3C「CSS Scroll Snap Module Level 1」
