スムーススクロールをCSSだけで実装【ずれる分の位置調整も】

著者:牧野健人

スムーススクロールをCSSだけで実装する方法を解説します。

また、よくある「スクロールがずれる問題」の解決方法も併せてご紹介します。

CSSだけでスムーススクロールを実装する方法

scroll-behavior: smooth; を使う

スムーススクロールをCSSで実装するには、scroll-behavior: smooth;<html>に適用します。

html {
    scroll-behavior: smooth;
}

scroll-behaviorはスムーススクロールをたった1行で実装できる、非常に便利なプロパティです。

ブラウザ対応も、2022年9月現在、IEや古いバージョンをカバーしない前提であれば基本的に大丈夫です。

scroll-behaviorのブラウザ対応状況
出典:Can I use

仮にサポート外の環境から閲覧された場合も、レイアウトを組むプロパティなどと違い致命的な問題が発生するわけではないので、その意味でもリスクは少ない手法だと思います。

なお、本記事はCSSでの実装を主旨としていますが、IEや古いバージョンもカバーできるjQueryのコードも後述します。

スクロールがずれるときの位置調整

CSSでの実装に限りませんが、スムーススクロールでスクロールの位置がずれてしまうことはよく見受けられる問題です。

これには固定ヘッダーの裏に隠れるパターン遅延読み込みによりずれるパターンの2つがありますので、以下でそれぞれの解決方法を解説します。

ヘッダーをposition: fixedで画面上部に固定している場合、スクロール先がヘッダーの裏に隠れてしまうことが考えられます。

これを解説するには下記の2つの手法があります。

scroll-padding-topを使う

scroll-padding-topを使うことで、スクロールのターゲットになっている要素が画面の最上部にピッタリつく位置ではなく、指定した分の距離を上に空けた位置に移動するように設定できます。

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

例えばヘッダーの高さが60pxの場合、上記のようにscroll-padding-top: 100px;をかけていれば、ヘッダーの下40pxの位置にスクロールで移動するようになります。

scroll-behaviorと同じくIEや古いバージョンでは対応していないですが、scroll-behaviorを使っている時点でそれらの環境は考慮しない前提なので、使うのに手間がかかる可能性があるネガティブマージンよりもscroll-padding-topを使う方がよいでしょう。

出典:Can I use
ネガティブマージンを使う

スムーススクロールのずれを解消するために昔からよく使われている手法です。

padding-topを指定することでスクロール位置を調整し、その上でmargin-toppadding-topをマイナスにした値を入れて視覚的な余白を相殺します。

h2 /* スクロール先をセレクタに */ {
    margin-top: -100px;
    padding-top: 100px;
}

ただ、 この場合はスクロールのターゲットになる要素をセレクタとして指定しなければなりません。scroll-padding-top<html>にだけ適用すれば大丈夫なので、これと比べると手間がかかります。

また、スクロールのターゲットになる要素に目に見える余白を指定したい場合はスクロールの位置調整のためのmarginpaddingを直接つけられないため、<span>などを追記する必要が生じます。

遅延読み込みによりずれるパターン

loading="lazy"などで画像を遅延読み込みさせている場合、スクロール先がずれる可能性があります。

これを回避するには、<img>width属性とheight属性を指定します。そうすることで、画像が読み込まれる前から表示領域が確保され、ずれを防ぐことができます。

<img src="..." alt="..." width="画像の幅" height="画像の高さ">

(番外編)jQueryでスムーススクロールを実装する

CSS のscroll-behaviorはたった1行でスムーススクロールを実装できる便利なプロパティですが、IEや主要ブラウザの古いバージョンにまで対応したい場合は使えません。これらの閲覧環境をカバーしたいときは、 JavaScriptを使う方法が考えられます。

以下に、GMOインターネットグループ様のブログから jQueryのコードを引用させていただきます。上述したスクロールのずれも、固定ヘッダーパターンと遅延読み込みパターンの両方がケアされています。

var $body = $('body,html');
 
$('a[href^="#"]').on('click', function(e){
  var $header = $('.header');
  var buffer = 0;
 
  if ($header.length){
  buffer += $header.innerHeight();
  }
 
  var speed = 400;
  var href = $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = Math.floor(target.offset().top - buffer);
 
  smoothScroll(target, position, speed, buffer, 0);
  return false;
});
 
function smoothScroll(target, position, speed, buffer, count){
  count++;
  if (count > 9 ) return false;
 
  $body.animate({ scrollTop: position }, speed, 'swing', function(){
    var dest = Math.floor(target.offset().top - buffer);
    if(dest == position){
      return true;
    } else {
      scrollsmooth(target, dest, 0, buffer, count);
    }
  });
}
出典:【jQueryスムーススクロール】position:fixed、画像遅延ロード、コンテンツ表示の遅れ等によるズレの解消 | 宮崎クリエイターズブログ
牧野健人

著者牧野健人

株式会社リラクス 代表取締役。マーケティング領域におけるクリエイティブ改善を専門としながら、アクセス解析やSEOの知見、ならびにデザイン・コーディングのスキルを活かしクライアントの成果向上のための取り組みに尽力しています。

お問い合わせはフォームよりお願いいたします。

お気軽にご相談ください

Webサイトに関する課題をお持ちの方はお気軽にご連絡ください。
課題が曖昧な状態でのご相談でも大丈夫です。

改善点や競合との比較がわかる無料サイト診断 無料相談・お問い合わせ
改善点や競合との比較がわかる無料のサイト診断