スムーススクロールをCSSだけを使用して簡単に実装する方法について【scroll-behavior】

本記事では、CSSだけを使ってスムーススクロールを実装するコードを紹介していきます。

scroll-behaviorプロパティを使用してスムーススクロールを実装

スムーススクロールを実装にするにあたって使用するのは以下のscroll-behaviorプロパティです。

scroll-behavior: smooth;

このプロパティをhtmlタグに対して設定することでスムーススクロールを簡単に実装することができます。

html {
  scroll-behavior: smooth;
}

こちらの方法は簡単にできるため是非お試しください。