ページ内のスムーススクロールをcssプロパティだけで適用する方法[scroll-behavior]

ページ内のスムーススクロールをcssプロパティだけで適用する方法[scroll-behavior]

Webサイトでよく見かける
「PAGE TOPヘ戻る」というようなボタン。
押すと、アニメーションを伴って、
同一ページ内の指定した要素の場所まで、画面をスクロールさせることができるアレです。

この機能を、cssだけで一発で実現する方法があります。

ご存知、 scroll-behavior: smooth; を使う

既にご存知の方も多いかと思いますが、方法としては
scroll-behavior: smooth;
というcssプロパティを、ルート要素(つまりhtml要素)に指定するだけです。

これで、上に書いたようないわゆる「スムーススクロール」の動きが実現できます。

ページ全体に適用する場合と、そうしない方が良い場合がある

簡単な方法がゆえに、私が制作現場で実際によく目にするコードとして

html {
  scroll-behavior: smooth;
}

↑こうなっているケースを見かけます。
この書き方で指定した場合、もうお分かりかと思いますが、
仮に
2章を見る
3章を見る

みたいなリンクが同一ページに複数あった場合、
「PAGE TOPヘ戻る」というようなボタンだけでなく、
それらのリンク全てが、アニメーションを伴う移動となります。

もちろん、それが期待される挙動であれば良いのですが、
そうでない場合もあります。

そういった場合にはこの方法を使用せず、
従来通り、JavaScriptを介したスムーススクロールを実装するのが望ましいでしょう。

iOS 15.4 の登場までは、JavaScriptとの併用が必須だった

この便利な scroll-behavior: smooth; ですが、
実はつい最近まで、iPhone上のSafariでは対応しておらず
全てをこれでまかなうことはできず、
結局のところJavaScriptを介して実装する形が一般的だったかと思います。

ただし、2022年3月にリリースされた iOS 15.4 以降のSafari
ついに標準で scroll-behavior: smooth; が対応となりました。

現実的にはまだ iOS 15.4 以降のみの対象で良いケースは
実案件では限られると思いますが、
これまでより scroll-behavior: smooth; の可能性が上がったことは事実ですね。
とは言っても、上のセクションで書いたような問題が残ることもまた事実です。
(ページ全体の、他のアンカーリンクにはスムーススクロールを適用したくない場合は結局、JavaScriptを介して処理を分ける必要があったり。アニメーションはブラウザ定義依存で、細かな調整は現時点では単純にはできない、等々。)

MDN内での解説など

ご存知、Mozilla社が提供しているWeb技術のオンラインリファレンスサイト、MDN Web docs 内に、
この scroll-behavior に関しての詳しい解説ページがあります。
scroll-behavioir – CSS:カスケーディングスタイルシート | MDN
↑このページの解説では、ページのルート全体ではなく
個別の要素に適用する例もサンプル付きで掲載されています。
これを見ると、overflow-y: scroll を持ち、かつその条件が発生している状態の要素に限り
(ざっくり言うと、そのボックス内でスクロールバーが出ている状態)
個別の要素にも scroll-behavior: smooth; が適用できることがわかります。

この記事のまとめ

今回は、cssだけでスムーススクロールが実現できる
scroll-behavior: smooth;
についての記事を書きました。

まだまだ実案件では
JavaScriptを介しての実装が必要なケースが多いとはいえ、
2022年3月にリリースされた iOS 15.4 以降のSafariであれば
標準で使用可能となったことから、
静的なページでの利用価値はかなり向上したはずです。

状況に応じて使える手段として、覚えておいて損はない方法だと感じています。

当サイトでは、今後もWebデザイン・Web制作に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。