【初心者向け】アンカーリンクの位置調整方法｜スクロール位置のズレを解消するテクニック

アンカーリンクと固定ヘッダーの問題とは？

アンカーリンクの基本的な仕組み

ページ内リンク（アンカーリンク）は、<a href="#id名">リンク</a> のように記述し、同じページ内の指定した要素へジャンプする仕組みです。

固定ヘッダーが影響する理由

ナビゲーションバーを常に表示するために position: fixed;を使用しているサイトが多いです。
しかし、ページ内リンクをクリックすると、指定した要素が画面の最上部に配置されるため、ヘッダーと重なってしまい、内容が見えなくなってしまうことがあります。

アンカーリンクが固定ヘッダーと被る原因と対処法

CSSだけで簡単に解決する方法

/* 固定ヘッダーの高さ分の余白を確保 */
.target-section {
  scroll-margin-top: 80px; /* ヘッダーの高さ分 */
}

:target 疑似クラスを活用する方法

/* リンク先の要素に余白を追加 */
:target::before {
  content: "";
  display: block;
  height: 80px; /* ヘッダーの高さ分 */
  margin-top: -80px;
}

JavaScriptを使ったスクロール調整

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    const headerOffset = 80; // ヘッダーの高さ
    const elementPosition = target.getBoundingClientRect().top + window.scrollY;
    const offsetPosition = elementPosition - headerOffset;

    window.scrollTo({
      top: offsetPosition,
      behavior: "smooth"
    });
  });
});

スムーズスクロールとの併用時の注意点

スムーズスクロールと併用すると、スクロール位置がズレることがあります。
その場合は、CSSとJavaScriptのスムーズスクロールを組み合わせましょう。

CSSだけでスムーズスクロールを設定している場合、JavaScriptの scrollIntoView() と競合することがあります。
その場合は、JavaScript側で behavior: "smooth" を指定し、CSSの scroll-behavior: smooth; を無効化するのがオススメです。

/* ブラウザ標準のスムーズスクロールを無効化 */
html {
  scroll-behavior: auto;
}

まとめ

✅ scroll-margin-top を適切に設定しているか？
✅ :targetを活用してデザイン調整しているか？
✅ JavaScriptを使う場合、ヘッダーの高さを考慮しているか？
✅ スムーズスクロールとの併用時に位置ズレが発生していないか？

固定ヘッダーとアンカーリンクが意図した動きにならない場合は、以上のポイントをチェックしてみましょう！