UPDATE：2023.7.6
- CATEGORY
【JSなしで簡単実装】CSSだけでスムーススクロールをしよう！
こんにちは、かずです。なんでもかんでもCSSで実装したがりコーダーです（？）
でも本当に近年CSSで出来ることが増えすぎて、思いついたらすぐCSSで出来ないか調べる癖がついてしまいました。
ということで最近やっとこ使うようになったCSSのご紹介。
scroll-behavior
こちらなんと、アンカーリンクでよく使うスムーススクロールをJavaScript等を使わずとも実装できてしまうんです！使い方も簡単、こうしてこうです。
ただこのままだとちょっとあれなのでもうひと手間。
scroll-padding-top
こちらは、ページ内リンクで移動した際に、通常は移動先にぴったりくっついてしまいますが、このプロパティでスクロール位置を上方向に調整出来ます！実際の余白でなくスクロールに対する余白というのがポイント！
という訳で scroll-padding-top も含めた記述がこちら。
こうしてこうしてこうです。
:root{
--header-height: 100px;
@media screen and (max-width: 767px){
--header-height: 60px;
}
}
body {
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
}もちろんモダンブラウザにも対応しているので自由に使いたい放題です！
カスタムプロパティ
scroll-behavior
scroll-padding-top
デメリットとしては、
・ヘッダーの高さがリアルタイムで取得出来ない
・スクロールスピードが指定出来ない
・urlにハッシュタグが付く（好みにもよりますが・・・）
といったくらいでしょうか。
JavaScript等と違ってカスタマイズが出来ないので、動きや速さなどをいじりたい場合は従来の方法でやりましょう！
それでは。
body {scroll-behavior: smooth;
}