ヘッダー固定時にページ内リンクがずれる場合の対処法【CSS】

最終更新日：2025-01-23

公開日：2025-01-23

ページ内に広告が含まれています。

ページ内リンク(アンカーリンク)は、クリックする事でアンカーを設置した箇所までスクロールして遷移する事の出来るリンクです。当ブログの記事の見出し一覧のリンクのように遷移ができます。
ページ内リンク(アンカーリンク)を設置する事で、ユーザーが目的の箇所まで辿り着きやすく利便性に繋がります。

今回は、ページ内リンク(アンカーリンク)がヘッダーを固定した場合にずれてしまう場合の対処法について解説していきます。

ヘッダー固定時にページ内リンクがずれてしまう原因
CSSでの対処法
さいごに

ヘッダー固定時にページ内リンクがずれてしまう原因

ヘッダーを固定する場合、position: fixed;で画面上部に固定する事が多いかと思います。
画面上部に浮かして固定する事で、ページ内リンクで遷移後のタイトルなどの部分がヘッダーの下に潜り込んでしまいます。

これを解消する場合、CSSやJavaScript・jQueryで対応出来るのですが、今回はCSSでの対処法を解説していきます。

CSSでの対処法

CSSでの対処法する場合、以下のようなコードで簡単に対処できます。

<div id="block1" class="anchor">
    <h2>コンテンツのタイトル</h2>
    <p>ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。</p>
</div>

.anchor {
    padding-top: 100px; /* ヘッダーの高さを入力 */
    margin-top: -100px; /* ヘッダーの高さを入力 */
}

上記のコードでは、padding-top: 100px;で余白を空け、margin-top: -100px;で戻す事でズレを解消しています。
それぞれpadding-topとmargin-topの値はヘッダーの高さを指定してあげてください。(ヘッダーの高さ+αで少し余白を空けてスクロールも可能です。)

また、以下の方法でも対処可能です。

scroll-padding-topとscroll-behavior

先程の方法の他に、以下の方法でも対処可能となりますので紹介いたします。

body {
    scroll-padding-top: 100px; /* ヘッダーの高さを入力 */
    scroll-behavior: smooth;
}

jQueryなどでスムーススクロールを設定している場合は効きませんが(変更または削除が必要)、CSSのみでスムーススクロールとページ内リンクのずれを解消する方法として上記の方法もあります。
scroll-behavior: smooth;でスムーススクロールの実装、scroll-padding-topでヘッダー分のずれを解消する事ができます。
※scroll-behaviorは少し前のブラウザだと対応していない場合もありますので注意してください。