ページトップへ戻る場合やページの目次などで任意の箇所へ移動する際にJavascriptなどを使用してスムーズにスクロールして目的の場所を表示させることがありますが、これを面倒なスクリプトは記述せずにCSSだけで実装する方法を紹介します。
スムーズスクロールの作り方
CSSでスムーズスクロールを実装するには、以下のコードをスタイルシートに記述します。
html {
scroll-behavior: smooth;
}
たったこの1行だけで簡単にスムーズスクロールを作ることができます。
対応しているブラウザは限られていますが、CSSだけでもこのような動きを付けることができますので、機会があれば試してみてください。
以上が、CSSのみでスムーズスクロールを実装する方法となります。