CSSだけでアンカーリンクをスムーススクロールさせる方法

JavaScriptを使わずにCSSのみで、アンカーリンク(ページ内リンク)のスムーススクロールを実装する方法の備忘録です。

scroll-behaviorプロパティ

scroll-behaviorを設定すると、同じページ内で遷移するアンカーリンクを使用した際に、ゆるやかにページをスクロール(スムーススクロール)させることができます。

html {
  scroll-behavior: smooth;
}

scroll-behaviorの注意点

JavaScriptよりも手軽に実装することができるscroll-behaviorプロパティですが、注意点もあります。

scroll-behaviorhtmlタグに設定します。bodyなど、他の要素に指定してもスクロールされません

そのため、サイト内の一部にだけスムーススクロールを実装したい場合は不向きです。

また、Safariのバージョン15.4以降など古いブラウザは、scroll-behaviorプロパティに対応していないため注意が必要です。

引用:“scroll-behavior” | Can I use…
Share on Twitter
関連記事
Sass(Dart Sass)の使い方と便利な機能まとめ
Sass(Dart Sass)の使い方と便利な機能まとめ
CSSで実装する文字を回転させるホバーエフェクトまとめ
CSSで実装する文字を回転させるホバーエフェクトまとめ
CSSで1文字目のスタイルを変える方法
CSSで1文字目のスタイルを変える方法