CSSのみでスムーススクロールを実装する【scroll-behavior】

投稿日:2024年08月01日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

本記事は執筆時点（2024年08月01日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

スムーススクロールはCSSだけで実装できる？

これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、CSSのみで実装できるプロパティがあることに気づいたので備忘録として残しておきます。

はじめにスムーススクロールについてまとめておくと、スムーススクロールはページ内リンクをクリックした際、リンク先の場所まで自動でスクロールしながら滑らか（スムース）に移動する機能です。

下の例を見比べてもらうとわかると思いますが、

通常のページ内リンクは下図のように一瞬でリンク先の位置まで移動するのに対し、

スムーススクロールはリンク先まで自動的でスクロールしながら移動します。

どちらが良いかは好みが分かれるところだと思いますが、個人的にはアニメーション風の動きがあるサイトの方がリッチな印象を与える効果が期待できると感じています。

Webページにスムーススクロールを実装する方法は大きく分けて以下の2つです。

この記事ではタイトルの通り、2つ目のCSSのscroll-behaviorプロパティを使った方法をご紹介します。

scroll-behaviorは現時点でChromeやEdge・Safariなど主要ブラウザは一通り対応しているようなので気兼ねなく導入できそうです。

scroll-behaviorは、スムーススクロールを実装するために用意されたプロパティで、「auto」「smooth」という2つの値によって設定を行います。

「auto」が初期値、「smooth」を設定するとスムーススクロールが有効になります。

スムーススクロールを実装するために重要なポイントは「htmlタグ」に対してプロパティを設定するという点です。

bodyタグなどその他の要素にscroll-behaviorを指定してもスムーススクロールにはなりません。

CSS

html{
    scroll-behavior:smooth;
}

これだけでスムーススクロールの実装が完了します。

ページ内のすべてページ内リンクがスムーススクロールで移動するようになります。

非常に簡単で便利なscroll-behaviorですが、以下のような注意点もあります。

JavaScriptで独自に実装するスムーススクロールと異なり、CSSのscroll-behaviorはページ全体に適用されるので、特定の要素のみスムーススクロールさせるといったカスタマイズはできません。

ページごとにスムーススクロールにするか切り替えたい場合はCSSの読み込ませ方を工夫するか、JSで独自に実装した方が良いでしょう。

以上が、scroll-behaviorプロパティを使ってCSSのみでスムーススクロールを実装する方法です。

わずかなコードでスムーススクロールを有効にできるので私同様ご存じなかった方はぜひ試してみてください。