CSSのみでスムーズスクロールを実装

ページトップへ戻る場合やページの目次などで任意の箇所へ移動する際にJavascriptなどを使用してスムーズにスクロールして目的の場所を表示させることがありますが、これを面倒なスクリプトは記述せずにCSSだけで実装する方法を紹介します。

スムーズスクロールの作り方

CSSでスムーズスクロールを実装するには、以下のコードをスタイルシートに記述します。

html {
  scroll-behavior: smooth;
}

たったこの1行だけで簡単にスムーズスクロールを作ることができます。

• DEMO

対応しているブラウザは限られていますが、CSSだけでもこのような動きを付けることができますので、機会があれば試してみてください。

以上が、CSSのみでスムーズスクロールを実装する方法となります。