【CSS】固定ヘッダー時にページ内リンクのスクロール位置のずれを調整する

こんにちは、Ryohei（@ityryohei）です！

本記事では、position: fixed等を使った固定ヘッダーのレイアウト時にページ内スクロールで発生するスクロール位置のずれを調整する方法をご紹介しています。CSSプロパティだけで実現する方法となります。

CSSでページ内リンクのスクロール位置のずれを調整する

CSSでページ内リンクのスクロール位置のずれを調整します。以前はJavaScriptやjQueryでページ内リンクのスクロール時に発生するスクロール位置のずれを調整していましたが、現在はCSSプロパティだけでスクロール後の位置を簡単に調整することができます。

scroll-margin-top

scroll-margin-topは、プロパティが指定された要素の外側上部に余白を設定することができるプロパティです。プロパティの頭にscrollと記述があるように、スクロールイベント後にのみ適用されるスタイルです。

構文

// 任意の値
scroll-margin-top: 10px;

// グローバル値
scroll-margin-top: inherit;
scroll-margin-top: initial;
scroll-margin-top: revert;
scroll-margin-top: unset;

実際にページ内リンクを設置したページで動作を確認してみます。

使用例

HTML

<section id="s1">
    <div class="btn">
        <a href="#s2">to #s2</a>
    </div>
</section>

<section id="s2">
    <div class="btn">
        <a href="#s3">to #s3</a>
    </div>
</section>

...

CSS

section {
  scroll-margin-top: 40px;
}

実行結果

See the Pen 8125-1 by ryohei (@intotheprogram) on CodePen.

実行結果の埋め込みにて、白文字のページ内リンクをクリックすると、スクロール完了後にscroll-margin-topを指定したsectionの上部に余白が設定されていることが確認できます。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/scroll-margin-top

scroll-padding-top

scroll-padding-topは、指定した要素の内側上部に余白を設定するプロパティです。scroll-margin-topと同様にスクロールイベント後にのみスタイルが適用されます。

構文

// キーワード値
scroll-padding-top: auto;

// 任意の値
scroll-padding-top: 10px;

// グローバル値
scroll-padding-top: inherit;
scroll-padding-top: initial;
scroll-padding-top: revert;
scroll-padding-top: unset;

実際にページ内リンクを設置したページで動作を確認してみます。

使用例

HTML

<section id="s1">
    <div class="btn">
        <a href="#s2">to #s2</a>
    </div>
</section>

<section id="s2">
    <div class="btn">
        <a href="#s3">to #s3</a>
    </div>
</section>

...

CSS

html {
  scroll-padding-top: 40px;
}

実行結果

See the Pen 8125-2 by ryohei (@intotheprogram) on CodePen.

scroll-margin-topでは、指定した要素の外側上部に余白が追加されるのに対して、scroll-padding-topでは指定した要素の内側上部に余白が追加されます。サイトのレイアウトに合ったプロパティをお使いください。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/scroll-padding-top

最後に

本記事ではご紹介していないプロパティですが、現在はページ内リンクのスムーズスクロールもCSSのscroll-behaviorというプロパティで実現することができます。簡単に設定できますので、下記を参考に使ってみてくださいね！

参考：https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior

以上、CSSで固定ヘッダー時にページ内リンクのスクロール位置のずれを調整する方法のご紹介でした！