アンカーリンクのズレを解消！固定ヘッダーに被る原因とCSS・JSでの修正方法を現役エンジニアが徹底解説

「ページ内リンクをクリックしたのに、見出しが消えた？」

Web制作をしていると必ず一度はぶつかる壁、それがアンカーリンクの到達地点が固定ヘッダーの下に潜り込んでしまう「ズレ」の問題です。

せっかくユーザーが目次から目的のコンテンツに飛ぼうとしているのに、肝の見出しが隠れてしまっては[amazon_link product=”macbook”]の画面越しにユーザーが首をかしげる姿が目に浮かびます。今回は、私が数々の現場で格闘してきた末にたどり着いた、アンカーリンクのズレを完璧に修正する方法を共有します。

なぜアンカーリンクは「ずれる」のか？
実録：私が試して本当に効いた3つの解決策
状況別：こんな「ズレ」の落とし穴に注意
最後に：小さな「ズレ」の修正がUXを救う

なぜアンカーリンクは「ずれる」のか？

結論から言うと、ブラウザの「ページ最上部」の解釈と、CSSの「固定（fixed）」要素が競合しているのが原因です。

ブラウザはアンカー（id属性）が指定された場所を「ウィンドウの表示領域の一番上」に持ってこようとします。しかし、最近のサイトの多くはヘッダーを上部に固定しているため、そのヘッダーの高さ分だけ中身が隠れてしまうのです。

以前、クライアントから「[amazon_link product=”iphone”]で見ると見出しがヘッダーの裏に隠れて、何を読んでいるかわからない」とクレームをいただいた際は、この仕様を失念していたのが原因でした。

実録：私が試して本当に効いた3つの解決策

現場で実際にコードを書き、検証を重ねた結果、以下の3つのアプローチが最も効率的で確実でした。

1. 【最強】CSSの scroll-margin-top を使う

これが現在、最もモダンで手軽な解決策です。私は最近のプロジェクトではほぼこれ一本です。

CSS

/* ズレを解消したい要素に記述 */
h2 {
  scroll-margin-top: 100px; /* ヘッダーの高さ分を指定 */
}

かつては面倒なハックが必要でしたが、このプロパティのおかげで、HTMLの構造を汚さずに位置調整が可能になりました。[amazon_link product=”dell モニター”]などの大画面で見ても、スマホで見ても、見事に指定した余白を保って止まってくれます。

2. 【万能】擬似要素を使った「見えない余白」

古いブラウザへの対応が必要だった時期、よくお世話になった手法です。ターゲットとなる要素の上に、ヘッダーの高さ分だけ「透明な壁」を作るイメージです。

CSS

h2::before {
  content: "";
  display: block;
  height: 100px; /* ヘッダーの高さ */
  margin-top: -100px; /* 負の余白で位置を相殺 */
  visibility: hidden;
}

これを使えば、デザイン上のマージンに影響を与えることなく、アンカーの「着地点」だけを上にずらせます。

3. 【こだわり派】JavaScript（jQuery）での微調整

「ヘッダーの高さがスクロール途中で変わる」「より滑らかに動かしたい」という場合は、JSでの制御が必須です。

私が過去に手がけたLP制作では、[amazon_link product=”logicool マウス”]のホイールを少し回すだけでヘッダーが小さくなる演出があったため、動的に高さを取得して計算するコードを実装しました。

JavaScript

$(function(){
  $('a[href^="#"]').click(function(){
    var headerHeight = $('header').outerHeight();
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top - headerHeight;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

状況別：こんな「ズレ」の落とし穴に注意

実装しても「あれ、まだずれる？」となるパターンがいくつかあります。

画像の読み込み遅延: ページ上部に大きな画像がある場合、画像が表示される前にジャンプすると、後から画像が入ってきて位置が押し下げられます。画像の width と height をしっかり記述しておくことが大切です。
スマホ表示（レスポンシブ）: PCでは100pxのヘッダーも、スマホでは60pxかもしれません。CSSで実装する場合は、メディアクエリを使って scroll-margin-top の値も変えるのを忘れないでください。

最後に：小さな「ズレ」の修正がUXを救う

アンカーリンクのズレは、制作者からすれば「些細な表示の問題」かもしれませんが、ユーザーからすれば「操作ミスをしたかのようなストレス」に直結します。

まずは一番簡単な scroll-margin-top を試してみてください。たった1行のコードで、あなたのサイトの使い勝手は見違えるほど良くなるはずです。[amazon_link product=”webデザイン本”]を読み漁るよりも、こうした現場の小さな修正の積み重ねが、結果として「質の高いサイト」への近道になります。

次は、あなたのサイトのヘッダーの高さを測るところから始めてみましょう。