Widely available 全主要ブラウザで対応済み。安心して使用できる。
スクロール Widely available

scroll-behavior: smooth

scroll-behavior: smooth を指定すると、アンカーリンクや scrollTo() によるスクロールがなめらかなアニメーションになる。ページ内ナビゲーションのUXを手軽に向上させることができる。JSライブラリを使わずにスムーススクロールを実現できる。

スクロールアニメーション

概要

scroll-behavior: smooth を指定すると、アンカーリンクや scrollTo() によるスクロールがなめらかなアニメーションになる。ページ内ナビゲーションのUXを手軽に向上させることができる。JSライブラリを使わずにスムーススクロールを実現できる。

対応ブラウザ

デスクトップ

Chrome 61+
Edge 79+
Safari 15.4+
Firefox 36+

モバイル

Chrome Android 61+
Safari iOS 15.4+
Firefox Android 36+

基本構文

CSS 
html {
  scroll-behavior: smooth;
}

/* 特定のコンテナにのみ適用 */
.scroll-area {
  scroll-behavior: smooth;
  overflow-y: auto;
}

実務での使いどころ

  • ページ内リンク

    目次やトップへ戻るボタンなど、ページ内アンカーリンクのスクロールをなめらかにする。

注意点

  • prefers-reduced-motion を考慮し、モーション軽減設定時は auto に戻すべき。

フォールバック戦略

CSS 
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

アクセシビリティ

  • モーション酔いを防ぐため、prefers-reduced-motion: reduce の場合は scroll-behavior: auto にフォールバックする。

参考リンク