CSS極めたい猫「CSSだけでスムーススクロールを実装」ってどういうこと？

この記事はCSSを学習し、更に学習を重ねたいWebデザイナーやコーダー、エンジニアに向けた記事になります。

今まではJavaScriptで頑張って表現していたようなUIなどがCSSだけで実装可能になってきました。
その中の一つとして「スムーススクロール（ページ内リンクまでスムーズにスクロールしていく表現）」があります。
以下、茶番も兼ねていますが御覧ください。

CSSを書けるようになりたて猫とCSS極めたい猫
まとめ：低コストでスムーススクロールを実装したい方

CSSを書けるようになりたて猫とCSS極めたい猫

ほてまる

ほて…、ほて……、ほてぇ……。よくわからないニャ～。

るり

ほてちゃん、どうしたミャ？

ほてまる

ほて、JavaScript良く分からないニャ。スムーススクロールを実装してって言われたんだけど、JavaScriptだったりjQueryとか色々あって、なにをどうすればいいのか分からないニャ…。

るり

なるほど、じゃあCSSだけで実装できるこれでいいんじゃないかミャ？

/** スムーススクロールをCSSだけで実装ミャ **/
html {
  scroll-behavior: smooth;
}
/** スクロールしたあとに上部に余白を作ると追随してくる要素を被らないミャ **/
:target {  
  scroll-margin-top: 100px;  
}

ほてまる

ほてええぇぇぇええ？！これだけでいいのかニャ！！！

るり

本当にこれだけミャ。「:target」の指定や解説はここでは詳しくしないけど、一緒に設定しておくと便利ミャ。

scroll-behavior - CSS: カスケーディングスタイルシート | MDN

scroll-behavior は CSS のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。

ほてまる

便利だニャ！！！

でも、ちょっと疑問ニャ。スクロールの速度とかはどうなるニャ？細かく指定とかできないのかニャ～？

るり

そこに関しては残念ながら指定できないミャ。

各種ブラウザに依存する形になるから、早すぎるとか遅すぎる、という細かい要望までは答えられないのが弱点ではあるミャ。
それと、既にJavaScriptで実装していたりすると挙動の保証ができなかったり、CSSを読み込んでいる全体に影響を及ぼすから特定の箇所だけスムーススクロールにしたい、なんてことはできないミャ～。

ほてまる

なるほどニャ？ということは時間もかけたくないし、全体的にこれでいいじゃない、という場合だけで使うって理解でいいのかにゃ？

るり

そうだミャ。細かい値まで設定できたほうがいいというのは製作者側、提供者側の都合だからブラウザ依存でも十分という理解を持ってもらうことができればこれで十分だミャ。

本来であれば利用者がブラウザのカスタマイズでできればいいと思うミャ～。

とはいえ、いまではほとんどのブラウザで実装されているミャ。