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
関連記事
CSSで斜めの背景を実装する方法
CSSで斜めの背景を実装する方法
CSSで擬似要素が表示されない原因と解決策
CSSで擬似要素が表示されない原因と解決策
ローディングアニメーションを実装する方法
ローディングアニメーションを実装する方法