【CSS】【scroll-behavior】スムーズスクロールを設定する

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

本記事では、CSSのscroll-behaviorでページ内のスクロールをスムーズスクロールを設定する方法をご紹介しています。従来のようにJavaScriptでスクリプトを用意する必要がなく、CSSのみで設定することができます。

CSSでスムーズスクロールを設定するには、どうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

CSSでスクロールを設定するには

scroll-behaviorというプロパティを使用します。

scroll-behaviorは指定したスクロールコンテナのスクロールの振る舞いを設定するプロパティです。現状では通常スクロールかスムーズスクロールを設定することができます。主要ブラウザに対応しているため、積極的に使用することができます。

scroll-behaviorの使い方

scroll-behaviorの構文は下記の通りです。

構文

// キーワード値
scroll-behavior: auto;
scroll-behavior: smooth;

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

autoが通常スクロール、smoothがスムーズスクロールになります。初期値はautoのため、スムーズスクロールに変更する場合に使用するプロパティとなります。

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

scroll-behaviorでスムーズスクロールを設定する

scroll-behaviorを使ってページ内リンクのスクロールをスムーズスクロールに設定してみます。ここではドキュメント全体が対象のためhtml要素にプロパティを設定します。

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-behavior: smooth;
}

実行結果は下記の通りです。

実行結果

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

ページ内リンクのスクロールがスムーズスクロールになっているのが確認できます。

最後に

scroll-behaviorはスクロールの振る舞いを通常スクロールかスムーズスクロールに設定することができるプロパティです。アニメーションに関する細かい設定はできないため、とりあえずスムーズスクロールを入れておきたい！おいう場合はscroll-behaviorを設定し、細かいアニメーションの設定が必要な場合はJavaScriptで組み込むなど使い分けをしてくださいね！

以上、CSSのscroll-behaviorでスムーズスクロールを設定する方法のご紹介でした！