たった1行のCSS「scroll-behavior」の設定で
ページ内リンクをスムーススクロールにする方法と注意点

もはや今のサイト制作において定番中の定番と言ってもいいくらいに極々当たり前になってきている感のあるスムーススクロールですが、実は今の時代ではCSSだけで作る事ができ、しかもたった1行のコードで設定をすることが可能になりました。

今回はそんなスムーススクロールをCSSの1行だけで設定する方法についてまとめいきますが、実際にそれ使われているか？というとかなり使えるケースというのが限られていると個人的には思っているので、使うメリットやデメリットなども合わせて紹介しています。

たった1行でスムーススクロールの設定方法

スムーススクロールというと、JavaScriptを使って設定するというのが今までの一般的なやり方でした。ところが、最近では、scroll-behaviorというCSSのプロパティによって、CSSのみでたった1行でスムーススクロールを設定することができるようになりました。

html{
  scroll-behavior: smooth;
}

設定はたったこれだけです。
これを設定するだけで、下記のデモページで確認できますが、ページ内リンクが滑らかに動くようになります。

デモページ

デフォルト値はsmoothではなくauto

このscrooll-behaviorですが、デフォルト値はauto;となっています。
auto;を指定していると、即時移動になりページ内リンクをクリックすると即移動になり、smooth;を指定することで、その名の通りスムーススクロールとなります。

最新のブラウザでは対応済みもSafariだけ要注意

Can i Useを見てもわかるとおり、主要なブラウザでは対応されていますが、Safariのみ15.4のバージョンからしか対応していませんので、その点だけ注意しておきましょう。

参考：“scroll-behavior” | Can I use…

実際にscroll-behaviorを使う際の注意点

たったCSSに1行追加設定するだけでスムーススクロールを使えることになるのですが、残念なことに、実践の場ではまだあまり使われておらず、結局はJavaScriptなどで設定されている事の方がまだまだ多いという実情があります。

主な理由を下記に挙げていきますが、実際にこのscroll-behaviorを使おうと思ったら、この注意点にしっかり気を配りながら、それでも問題なさそうというサイトにのみ使えるという形になります。

全てのページ内リンクが対応で除外などができない

これが使われにくい最大の理由の1つではないかなと思うのですが、scroll-behaviorはrootに設定することになるため、全てに対して制御が効いてしまうことになり、ページ内のリンクは全てスムーススクロールになってしまいます。

このリンクとこのリンクは…といった個別に対応などが難しくなり、ページ数が増えたり規模が大きくなればなるほど使うのが難しくなりがちです。

移動の速度調整ができない

よくスムーススクロールで使われるJavaScriptの設定であれば、スムーススクロールの移動速度を自由に設定できますが、scroll-behaviorの場合は全てが一定の速度になり変更ができません。

速度は好みなどによるところもあるかもしれませんが、やや高速移動に近い速度になるため、これを調整できないという点は覚えておく必要があります。

URLに#のアンカーリンクがクリック時に付与される

これも善し悪しではありサイトの運用方法や色々な点から考える必要がありますが、scroll-behaviorでページ内リンクを遷移した場合、URLに「#」のアンカーリンクが付与されます。

JavaScriptなどの遷移では付与する・しないを選べたりするものもありますが、CSSのみでの設定の場合はそこを変えたりすることはできません。

クリックする度にアンカーリンクが付与され、#○○といったURLに変わるということは、ブラウザの戻るボタンでページを戻ろうとしたとき、アンカーリンクをクリックする前に戻るという遷移になります。

移動先の位置調整が難しい

JavaScriptを使ったスムーススクロールの場合、移動先の位置の調整などは行う事ができるのですが、今回のCSSでの設定の場合は位置調整などの設定がないため、移動先の位置調整をする場合は、移動先のブロックなどにCSSでmarginやpaddingで設定をして調整する必要があります。

デモページの「セクション5」のところだけ、padding-top: 100px;を設定しているので、スムーススクロールで移動した際に上部に100pxの余白があります。

この設定ができるなら特に問題なさそうと思うかもしれませんが、ヘッダー固定などがあった場合、余白を入れたいところに全て個別でCSSを設定する必要があるということにもつながります。

scroll-paddingを使ったり、ネガティブマージンを使って移動先の位置調整を行うことも可能ではあるのですが、そこまでして設定をややこしくするくらいなら、jQueryなどJavaScriptを使ったスムーススクロールの方がミスも起きにくく使い勝手も良いという結果になりがちです。

まとめ

1行で設定できるので非常に楽と思いきや、実際にいざ使ってみようと思うと使い勝手が悪かったり結局色々細かく設定するはめになり、JavaScriptやjQueryで設定した方が結果的に楽だったという事が多くなりがちです。

実際、自分も実務でこの設定を使っているか？と言われると、ほとんどのケースで使っていないというのが実情で、JavaScriptやjQueryによるスムーススクロールの設定を使っています。

どういうケースで使うかというと、ランディングページなどの1ページ構成で、上下に少し移動したりする程度のコンテンツ内容だったり、他にアンカーリンクを使ったりしないようなページ構成だったりする場合には使ったりもしています。

非常に簡単に設置できる一方で、使う時には注意も必要になりますので、その点をしっかり把握した上で使えるサイトに使い、難しい場合にはJavaScriptなどを使ったスムーススクロールを検討していくというのが良いのではないかと個人的には思っています。