W3 Watch Reference

scroll-behavior プロパティは、スクロール可能なボックスにスクロールが発生した際のスクロール動作について設定します。

指定可能な値は下記の通りで、smooth を使用することで、所謂 「スムーズスクロール」 を CSS のみで実現できます。

値	意味
auto	スクロールは瞬時に行われます （初期値）。
smooth	スクロールはユーザエージェントが定義した速度と動きによって滑らかに行われます。所謂スムーズスクロールが実現可能です。 なお、プラットフォームでの慣習や規約があるのであれば、ユーザエージェントはそれに従うべきと定義されています。

このプロパティがルート要素 （html 要素） に指定された場合はビューポートに適用されます。body 要素への指定ではビューポートには適用されません。

なお、このプロパティの影響範囲は、アンカーリンクなどのナビゲーションによるページ内の移動や、CSS Object Model (CSSOM) View Module におけるスクロール API によってスクロール可能なボックスにスクロールが発生した場合などに限られ、ユーザー自身が実行したスクロール、つまりマウスやキーボードの操作によるスクロールに関してはこのプロパティの影響を受けません。

.scroll-contents {
  scroll-behavior: smooth;
  display: block;
  overflow-y: scroll;
  height: 200px;
  width: 100%;
}