---
title: "ページ内リンクでスクロール位置がずれるときの対処"
description: "目次リンクをクリックすると飛んだ先の見出しが固定ヘッダーの裏に隠れてしまう。アンカーリンクとスクロール基準のずれが原因で、数行の CSS で解決できます。仕組みと対処手順を整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/scroll-position-not-restored"
markdown: "https://giga-site.com/articles/scroll-position-not-restored/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# ページ内リンクでスクロール位置がずれるときの対処

目次のリンクをクリックすると、飛んだ先の見出しが固定ヘッダーの下に隠れてしまう。あるいは思った位置に止まらない。これはアンカーの飛び先とスクロール基準のずれが原因です。仕組みを押さえれば、数行のCSSで解決できます。

> Source HTML: https://giga-site.com/articles/scroll-position-not-restored
> Article index: https://giga-site.com/articles/index.md

## なぜ位置がずれるのか

ページ内リンクは、href="#section1" のように指定したid要素の先頭がブラウザ画面の最上端に来るようにスクロールします。問題は、画面上部に固定ヘッダーがある場合です。要素の先頭は確かに最上端に来ますが、その上に固定ヘッダーが重なるため、見出しがヘッダーの下に隠れて見えなくなります。

つまり「ずれている」のではなく、ブラウザは仕様どおりに最上端へ飛んでいて、固定ヘッダーの高さ分だけ余白が足りていない、という状態です。原因をこう捉えると対処が決めやすくなります。

## scroll-margin-top で余白を確保する

最も素直な解決策は、飛び先となる見出し要素に scroll-margin-top を指定することです。これはスクロールで止まる位置に上方向の余白を持たせるプロパティで、固定ヘッダーの高さと同じ値を入れると、見出しがヘッダーの下に潜らなくなります。

例えばヘッダーの高さが64pxなら、対象の見出しに scroll-margin-top: 80px のように少し余裕を持たせて指定します。ページ内のすべての飛び先見出しに共通で当てておくと、どのリンクから飛んでも一貫した位置で止まります。

## 症状別チェック表

ページ内リンクでスクロール位置がずれるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## スムーズスクロールと履歴の挙動

html要素に scroll-behavior: smooth を指定すると、アンカーへの移動がなめらかになります。位置ずれそのものは直しませんが、どこへ飛んだかが分かりやすくなり、scroll-margin-topと併用すると体感が良くなります。

また、ブラウザにはページ再読み込み時に前のスクロール位置を復元する仕組みがあります。意図せず位置が戻ってしまう場合は、この自動復元と自前のスクロール処理が競合していないかも疑ってください。素のHTMLでは通常問題になりませんが、JSで独自にスクロールを制御していると起きがちです。

## 手順で直す

実際の修正は次の順で進めると確実です。

1. 固定ヘッダーの実際の高さ（px）を測る
2. 飛び先になる見出し要素に scroll-margin-top をヘッダー高さ＋少しの余裕で指定する
3. 必要なら html に scroll-behavior: smooth を追加する
4. 目次の各リンクを順にクリックし、見出しが隠れず表示されるか確認する
5. JSで独自スクロール処理がある場合は、ブラウザの位置復元と競合していないか確認する

## レビューで位置を確認してもらう

スクロール位置の違和感は、書いた本人より読み手のほうが敏感に気づくことがあります。長い資料やランディングページほど、目次から各セクションへ正しく飛べるかを実際に触って確かめてもらうと安心です。

ギガサイト便ならHTMLをドロップするだけで共有URLが発行され、関係者がブラウザで目次リンクを実際にクリックして確認できます。scroll-margin-topを調整したら同じURLのままファイルを差し替えられるので、再確認の依頼も最新版のリンクひとつで済みます。

## よくある質問

### scroll-margin-top はどの要素に付ければよいですか

リンクの飛び先になる、idを持つ要素（多くは見出し）に付けます。見出しに直接idを振っている場合はその見出しへ、見出しを囲むセクションにidがある場合はそのセクションへ指定します。

### 値はいくつにすればよいですか

固定ヘッダーの実際の高さを基準にします。ヘッダーが64pxなら、隙間に少し余裕を持たせて72〜80px程度にすると、見出しが詰まりすぎず読みやすくなります。

### scroll-behavior: smooth を入れたほうがよいですか

必須ではありません。位置ずれの解決はscroll-margin-topが担います。smoothは移動が見やすくなる演出なので、好みやページの性格に合わせて選んでください。

### 修正したアンカーの動きを相手に確認してもらうには

ギガサイト便でHTMLを共有すれば、相手は実際のブラウザで目次リンクをクリックして挙動を確認できます。直すたびに同じURLのまま差し替えられるので、確認のやり取りがリンク一つで完結します。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [position:stickyのヘッダーが追従しないときの原因と直し方](https://giga-site.com/articles/sticky-header-not-sticking/index.md)
- [意図しない横スクロールが出るときの原因と対処](https://giga-site.com/articles/horizontal-scroll-bug/index.md)
- [モーダル表示中に背景がスクロールしてしまうときの対処](https://giga-site.com/articles/modal-scroll-behind-mobile/index.md)
- [position:fixedの要素がずれるときの対処](https://giga-site.com/articles/position-fixed-broken/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ページ内リンクでスクロール位置がずれるときの対処",
  "description": "目次リンクをクリックすると飛んだ先の見出しが固定ヘッダーの裏に隠れてしまう。アンカーリンクとスクロール基準のずれが原因で、数行の CSS で解決できます。仕組みと対処手順を整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/scroll-position-not-restored",
  "url": "https://giga-site.com/articles/scroll-position-not-restored",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "scroll-margin-top はどの要素に付ければよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "リンクの飛び先になる、idを持つ要素（多くは見出し）に付けます。見出しに直接idを振っている場合はその見出しへ、見出しを囲むセクションにidがある場合はそのセクションへ指定します。"
      }
    },
    {
      "@type": "Question",
      "name": "値はいくつにすればよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "固定ヘッダーの実際の高さを基準にします。ヘッダーが64pxなら、隙間に少し余裕を持たせて72〜80px程度にすると、見出しが詰まりすぎず読みやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "scroll-behavior: smooth を入れたほうがよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "必須ではありません。位置ずれの解決はscroll-margin-topが担います。smoothは移動が見やすくなる演出なので、好みやページの性格に合わせて選んでください。"
      }
    },
    {
      "@type": "Question",
      "name": "修正したアンカーの動きを相手に確認してもらうには",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便でHTMLを共有すれば、相手は実際のブラウザで目次リンクをクリックして挙動を確認できます。直すたびに同じURLのまま差し替えられるので、確認のやり取りがリンク一つで完結します。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```