jQueryのスムーススクロールから「scroll-margin-top」への乗り換えを

2026.06.19　Posted by Coding_team

Webプログラミング

こんにちは、ウェブラボクリエイターズメモです。

ヘッダーを固定しているサイトで、ページ内リンクをクリックしたらリンク先がヘッダーに隠れてしまった、という経験はありませんか？

よくある解決策は、jQueryを使ったスムーススクロールに「ヘッダーの高さ分だけずらす」処理を加えることでした。

$('a[href^="#"]').on("click", function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top - 80; /* ヘッダーの高さ(80px)分だけ上にずらす */
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
});

$('a[href^="#"]').on("click", function(){

var speed = 500;

var href= $(this).attr("href");

var target = $(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top - 80; /* ヘッダーの高さ(80px)分だけ上にずらす */

$("html, body").animate({scrollTop:position}, speed, "swing");

return false;

});

この方法でも問題はないのですが、実は現在では、CSSの scroll-behavior と scroll-margin-top を組み合わせるだけで、同じことがよりシンプルに実現できます。

scroll-behavior：CSSだけでスムーススクロールを実現する
scroll-margin-top：固定ヘッダーに隠れる問題を解決する
実装方法
jQueryの方法との比較
ブラウザ対応
応用：scroll-padding-top を使う方法もある
補足：アニメーションを無効にしているユーザーへの配慮

scroll-behavior：CSSだけでスムーススクロールを実現する

scroll-behavior は、スクロールの動き方を指定するCSSプロパティです。smooth を指定するとアンカーリンクのクリック時にスムーススクロールが有効になります。

html {
    scroll-behavior: smooth; /* スムーススクロールを有効にする */
}

html {

scroll-behavior: smooth; /* スムーススクロールを有効にする */

}

たったこれだけです。jQueryは一切不要です。

scroll-margin-top：固定ヘッダーに隠れる問題を解決する

scroll-margin-top は、アンカーリンクでスクロールしたときに要素の上に余白を作るCSSプロパティです。

固定ヘッダーの高さ分をここに設定しておくことで、セクションがヘッダーに隠れる問題を解決できます。

#section1 {
    scroll-margin-top: 80px; /* ヘッダーの高さに合わせて変更する */
}

#section1 {

scroll-margin-top: 80px; /* ヘッダーの高さに合わせて変更する */

}

ページ内リンクの飛び先となるすべての要素に設定が必要ですが、セレクタを[id] にすることで、ID属性を持つ要素すべてに一括で適用できます。

[id] {
    scroll-margin-top: 80px; /* id属性を持つ要素すべてに適用 */
}

[id] {

scroll-margin-top: 80px; /* id属性を持つ要素すべてに適用 */

}

実装方法

それでは実際に実装してみましょう。

CSSの設定

/* スムーススクロールを有効にする */
html {
    scroll-behavior: smooth;
}

/* 固定ヘッダーに隠れないよう余白を確保する */
[id] {
    scroll-margin-top: 80px; /* ヘッダーの高さに合わせて変更する */
}

/* スムーススクロールを有効にする */

html {

scroll-behavior: smooth;

}

/* 固定ヘッダーに隠れないよう余白を確保する */

[id] {

scroll-margin-top: 80px; /* ヘッダーの高さに合わせて変更する */

}

HTMLはそのままでOK

リンク側とターゲット側のHTMLは従来と変わりません。

&lt;!-- リンク側 --&gt;
&lt;a href="#section1"&gt;セクション1へ&lt;/a&gt;

&lt;!-- ターゲット側 --&gt;
&lt;section id="section1"&gt;
    &lt;h2&gt;セクション1&lt;/h2&gt;
    &lt;p&gt;コンテンツ&lt;/p&gt;
&lt;/section&gt;

<a href="#section1">セクション1へ</a>

<h2>セクション1</h2>

<p>コンテンツ</p>

</section>

(必要であれば)jQueryのコードは削除する

今まで使っていたjQueryのスムーススクロール用のコードは不要になります。
必要に応じて、既存のコードも削除しましょう。

jQueryの方法との比較

	jQueryの方法	CSSの方法
jQueryの読み込み	必要	不要
コード量	多い	少ない
ヘッダー高さの調整	JSの数値を変更する	CSSの数値を変更する
セクションごとに余白を変える	難しい	簡単（個別に上書きできる）

ブラウザ対応

Chrome・Firefox・Safari・Edgeの主要ブラウザに対応しています（IE11は非対応）。

応用：scroll-padding-top を使う方法もある

似たようなプロパティとして scroll-padding-top という方法もあります。

scroll-margin-top は各要素（移動先のセクション）に設定するのに対して、scroll-padding-top はスクロールするコンテナ側（html 要素）に設定します。

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* ヘッダーの高さに合わせて変更する */
}

html {

scroll-behavior: smooth;

scroll-padding-top: 80px; /* ヘッダーの高さに合わせて変更する */

}

全セクション共通でオフセットを設定するなら、html に1回書くだけで済む scroll-padding-top の方がシンプルです。一方で「このセクションだけ余白を多くしたい」という個別の調整が必要な場合は、セクションごとに上書きできる scroll-margin-top の方が柔軟に対応できます。

どちらを使っても結果は同じなので、サイトの構成に合わせて使いやすい方を選んでみてください。

補足：アニメーションを無効にしているユーザーへの配慮

OSやブラウザの設定で「視差効果を減らす」「アニメーションを無効にする」を有効にしているユーザーがいます。スムーススクロールもアニメーションの一種なので、そういったユーザーには瞬時にスクロールする方が親切かもしれません。

CSSの prefers-reduced-motion メディアクエリを使うと、アニメーション設定を無効にしているユーザーにだけ scroll-behavior を無効化できます。

html {
    scroll-behavior: smooth;
}

/* アニメーションを減らす設定にしているユーザーには瞬時に移動する */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}