ページ内リンクでスクロール位置がずれるときの対処

なぜ位置がずれるのか

ページ内リンクは、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のままファイルを差し替えられるので、再確認の依頼も最新版のリンクひとつで済みます。