HOME
本記事は執筆時点（2024年08月01日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
スムーススクロールはCSSだけで実装できる？
これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、CSSのみで実装できるプロパティがあることに気づいたので備忘録として残しておきます。
スムーススクロールとは？
はじめにスムーススクロールについてまとめておくと、スムーススクロールはページ内リンクをクリックした際、リンク先の場所まで自動でスクロールしながら滑らか（スムース）に移動する機能です。
下の例を見比べてもらうとわかると思いますが、
通常のページ内リンクは下図のように一瞬でリンク先の位置まで移動するのに対し、
スムーススクロールはリンク先まで自動的でスクロールしながら移動します。
どちらが良いかは好みが分かれるところだと思いますが、個人的にはアニメーション風の動きがあるサイトの方がリッチな印象を与える効果が期待できると感じています。
スムーススクロールを実装するための2つの方法
Webページにスムーススクロールを実装する方法は大きく分けて以下の2つです。
- JavaScriptで独自に設定する
- CSSのscroll-behaviorプロパティを使う
この記事ではタイトルの通り、2つ目のCSSのscroll-behaviorプロパティを使った方法をご紹介します。
scroll-behaviorは現時点でChromeやEdge・Safariなど主要ブラウザは一通り対応しているようなので気兼ねなく導入できそうです。
scroll-behaviorの使い方
scroll-behaviorは、スムーススクロールを実装するために用意されたプロパティで、「auto」「smooth」という2つの値によって設定を行います。
「auto」が初期値、「smooth」を設定するとスムーススクロールが有効になります。
スムーススクロールを実装するために重要なポイントは「htmlタグ」に対してプロパティを設定するという点です。
bodyタグなどその他の要素にscroll-behaviorを指定してもスムーススクロールにはなりません。
CSS
html{
scroll-behavior:smooth;
}
これだけでスムーススクロールの実装が完了します。
ページ内のすべてページ内リンクがスムーススクロールで移動するようになります。
非常に簡単で便利なscroll-behaviorですが、以下のような注意点もあります。
scroll-behaviorはカスタマイズが効かない
JavaScriptで独自に実装するスムーススクロールと異なり、CSSのscroll-behaviorはページ全体に適用されるので、特定の要素のみスムーススクロールさせるといったカスタマイズはできません。
ページごとにスムーススクロールにするか切り替えたい場合はCSSの読み込ませ方を工夫するか、JSで独自に実装した方が良いでしょう。
まとめ
以上が、scroll-behaviorプロパティを使ってCSSのみでスムーススクロールを実装する方法です。
わずかなコードでスムーススクロールを有効にできるので私同様ご存じなかった方はぜひ試してみてください。
