scroll-padding-topはリロード時にズレる？CSS変数とJavaScriptで解決するアンカーリンク調整

固定ヘッダーのあるサイトでアンカーリンクを使用すると、ジャンプ先がヘッダーの下に隠れてしまう問題があります。この問題を解決する方法として scroll-padding-top が広く知られていますが、実はリロード時にページがズレるという問題があることをご存知でしょうか。

この記事では、scroll-padding-top の問題点と、CSS変数とJavaScriptを組み合わせた代替手法を紹介します。

scroll-padding-topとは

scroll-padding-top は、スクロールスナップやアンカーリンクのジャンプ位置を調整するCSSプロパティです。

html {
    scroll-padding-top: 80px; /* ヘッダーの高さ分 */
    scroll-behavior: smooth;  /* スムーススクロール */
}

たったこれだけで、アンカーリンクのジャンプ先がヘッダーの高さ分だけ上にオフセットされます。主要ブラウザでサポートされており、非常にシンプルな解決策として多くのサイトで採用されています。

scroll-padding-topの問題点

リロード時にページがズレる

scroll-padding-top を設定したサイトで、フロントページ（トップページ）をリロードすると、本来ページの先頭から表示されるべきところが、scroll-padding-top の値だけ下にズレて表示されることがあります。

例えば scroll-padding-top: 150px; と設定している場合、リロードするとページが150px分下にスクロールした状態で表示されてしまいます。

なぜリロード時にズレるのか

この現象は、ブラウザのスクロール位置復元機能（Scroll Restoration）と scroll-padding-top が競合することで発生します。

ブラウザのスクロール復元機能: ブラウザは通常、ページのリロード時に前回のスクロール位置を記憶して復元しようとします
scroll-padding-topの適用タイミング: CSSで定義されたパディングが計算に反映される前にスクロールが完了してしまうことがあります
適用対象の問題: scroll-padding-top は通常、html要素やbody要素、あるいはスクロールコンテナ自体に適用する必要があります。これが正しく適用されていないと、初回のクリック時は動作しても、リロードなどのシステム的なスクロール時には無視されることがあります
動的なコンテンツの読み込み: 画像やWebフォント、あるいはJavaScriptによる要素の生成など、ページの高さがリロード後に動的に変わる場合、ブラウザが位置を特定した時点と最終的なレイアウトが完成した時点で位置に差異が生じます

リロード時の挙動はブラウザの仕様（Chrome, Firefox, Safari等）によって微妙に優先順位が異なるため、すべての環境で完璧に動作させるには、前述のようなJavaScriptによる補正が必要になるケースが依然として多いのが現状です。

JavaScriptによるスクロール制御との競合

scroll-padding-top や scroll-margin-top は、JavaScriptでスクロール動作を制御している場合、無視されることがあります。

具体的には以下のようなケースで問題が発生します：

jQueryプラグイン: WordPressの目次プラグイン（Easy Table of Contents など）がsmooth-scrollスクリプトを使用している場合
Next.js: App Routerの Link コンポーネントでアンカーリンクを使用した場合（v13.4.3で修正済み）
React Router: 同様にJavaScriptでルーティングを制御している場合
カスタムスムーススクロール: 独自のJavaScriptでスクロールアニメーションを実装している場合

これは、JavaScriptが window.scrollTo() や element.scrollIntoView() などのAPIを使用してスクロール位置を直接制御する場合、CSSの scroll-padding プロパティが考慮されないことが原因です。

つまり、CSSだけで完結するネイティブなアンカーリンクでは scroll-padding-top は正しく動作しますが、JavaScriptが介在すると効かなくなる可能性があります。

その他の制約

ヘッダーの高さがPC/SPで異なる場合、メディアクエリでの切り替えが必要
個別のアンカーポイントごとに異なるオフセット値を設定できない
可変高さのヘッダー（スクロールで縮小するなど）への対応が難しい

解決策：CSS変数とJavaScriptを使った方法

scroll-padding-top の代わりに、従来の margin-top と padding-top を使った手法をCSS変数とJavaScriptで柔軟に実装します。

メリット

リロード時のズレが発生しない: ブラウザのスクロール復元機能と競合しない
柔軟性: 個別の要素ごとに異なるオフセット値を設定可能
メンテナンス性: ヘッダーの高さが変更された場合、CSS変数を更新するだけで全体に反映
レスポンシブ対応: メディアクエリでCSS変数を切り替えるだけで対応
デザイナーフレンドリー: HTMLの属性やインラインスタイルで簡単に調整可能

コードと解説

1. CSS

:root {
    --header-height: 4pc;
    --anchor: var(--header-height);
}

@media print, screen and (min-width: 744px) {
    :root {
        --header-height: 5.5pc;
        --anchor: var(--header-height);
    }
}

/* アンカーリンク位置調整（フォールバック用） */
[anchor] {
    margin-top: calc(var(--anchor) * -1);
    padding-top: var(--anchor);
}

:root セレクタでグローバルなCSS変数を定義しています。--header-height はヘッダーの高さ、--anchor はアンカーリンクの調整値です。メディアクエリで画面サイズに応じて値を変更できます。

2. HTML

<!-- デフォルトの調整を使用（--anchor変数が適用される） -->
<section id="about" anchor>
    <h2>About</h2>
    ...
</section>

<!-- カスタム値で調整 -->
<section id="service" anchor="120px">
    <h2>Service</h2>
    ...
</section>

<!-- 単位省略可（pxとして扱われる） -->
<section id="contact" anchor="100">
    <h2>Contact</h2>
    ...
</section>

<!-- CSS変数を直接指定 -->
<section id="news" anchor="var(--header-height)">
    <h2>News</h2>
    ...
</section>

<!-- IDなしでもOK（自動生成される） -->
<hr anchor="5pc">

anchor 属性を追加するだけで、アンカーリンクの位置調整が適用されます。値を指定すれば個別のオフセットも可能です。

3. JavaScript

(function () {
  //_instyle-anchor.js
  //[anchor] 属性を持つすべての要素を取得
  const elements = document.querySelectorAll('[anchor]');

  //スタイル要素を作成（一度だけ作成）
  const STYLE = document.createElement('style');
  document.head.appendChild(STYLE);

  elements.forEach((el) => {
    //anchor 属性から値を取得
    const anchorValue = el.getAttribute('anchor');

    //IDを取得、なければランダムIDを生成
    let id = el.id || 'anchor-' + Math.random().toString(36).substr(2, 9);
    el.id = id;

    let anchorStyle = '';

    if (anchorValue) {
      //値と単位を分離する正規表現（'r'も含める）
      const match = anchorValue.match(/^(\d*\.?\d+)(px|pc|r|rem|vw|vh|em)?$/);

      if (match) {
        const value = parseFloat(match[1]);
        let unit = match[2] || 'px'; //単位が指定されていない場合はpxとする

        //'r' を 'rem' に変換
        if (unit === 'r') {
          unit = 'rem';
        }

        //CSSルールを生成（数値＋単位の場合）
        anchorStyle = `
          #${id} {
            margin-top: -${value}${unit};
            padding-top: ${value}${unit};
          }
        `;
      } else {
        //数値・単位でない場合（CSS変数など）はそのまま使用
        anchorStyle = `
          #${id} {
            margin-top: calc(-1 * (${anchorValue}));
            padding-top: ${anchorValue};
          }
        `;
      }
    } else {
      //属性値がない場合はCSS変数をフォールバック
      anchorStyle = `
        #${id} {
          margin-top: calc(-1 * var(--anchor));
          padding-top: var(--anchor);
        }
      `;
    }

    //スタイルに追加（エラーハンドリング付き）
    try {
      STYLE.sheet.insertRule(anchorStyle, STYLE.sheet.cssRules.length);
    } catch (e) {
      console.error(`Failed to insert CSS rule for element with id "${id}": ${e.message}`);
    }
  });
})();

JavaScriptの動作

anchor 属性を持つすべての要素を選択
新しい <style> 要素を作成
各要素に対して：
- anchor 属性の値を取得
- IDがなければランダムIDを自動生成
- 値の形式に応じてCSSルールを生成
- 生成したルールをスタイルシートに挿入

対応する値の形式

指定方法	例	結果
数値+単位	`anchor="120px"`	`margin-top: -120px; padding-top: 120px;`
数値のみ	`anchor="100"`	`margin-top: -100px; padding-top: 100px;`
rem省略形	`anchor="5r"`	`margin-top: -5rem; padding-top: 5rem;`
CSS変数	`anchor="var(--header-height)"`	CSS変数がそのまま適用
値なし	`anchor`	`var(--anchor)` が適用

scroll-padding-topを使いたい場合の回避策

既存サイトで scroll-padding-top を使い続けたい場合は、以下のJavaScriptでリロード時の問題を軽減できます。

// スクロール復元を手動モードにする
if (history.scrollRestoration) {
  history.scrollRestoration = 'manual';
}

// ページ読み込み時にトップへ（ハッシュがない場合のみ）
window.addEventListener('DOMContentLoaded', function() {
  if (!window.location.hash) {
    window.scrollTo(0, 0);
  }
});

ただし、この方法は「前回のスクロール位置に戻りたい」というユーザー体験を損なう可能性があるため、注意が必要です。

まとめ

scroll-padding-top はシンプルで便利なプロパティですが、Scroll Restoration（ブラウザのスクロール位置復元機能）以外にも「フォーカス移動時のスクロール」「Safari の rem 解釈」など、複数の落とし穴があります。

CSS変数とJavaScriptを組み合わせた手法なら：

リロード時のズレが発生しない
個別のアンカーポイントごとに異なるオフセット値を設定できる
レスポンシブ対応も容易
HTMLの属性で直感的に調整できる

固定ヘッダーを使用するレスポンシブデザインのウェブサイトで特に有用な手法です。

キャッシュクリアをするJavaScript「cache-cleaner.js」

Swiperの自動再生が「なぜ」止まるのか？本質から理解する設定ガイド

iOSのpointer-eventsバグとイベント制御対策

3466個のDOM要素でも軽快に動作！大量データ表示のパフォーマンス最適化テクニック

iPhoneでも動作！response.jsで実現する画像・動画・iframeのレスポンシブ遅延読み込み完全ガイド

スマホとPCで別々のスタイルを適用するJavaScript -JavaScriptのパフォーマンス最適化-

Webパフォーマンス改善：PageSpeed Insightsスコアを大幅に改善できた5つの施策

scroll-padding-topはリロード時にズレる？CSS変数とJavaScriptで解決するアンカーリンク調整

scroll-padding-topはリロード時にズレる？CSS変数とJavaScriptで解決するアンカーリンク調整

scroll-padding-topとは

scroll-padding-topの問題点

リロード時にページがズレる

なぜリロード時にズレるのか

JavaScriptによるスクロール制御との競合

その他の制約

解決策：CSS変数とJavaScriptを使った方法

メリット

コードと解説

1. CSS

2. HTML

3. JavaScript

JavaScriptの動作

対応する値の形式

scroll-padding-topを使いたい場合の回避策

まとめ

参考

開発者のためのフォームテスト効率化！Chrome拡張機能「Form Auto Filler」

MON architects｜東京都墨田区・建築設計事務所