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

scroll-behavior: smooth

scroll-behavior は CSS のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
scroll-behavior
61
79
36
15.4
61
15.4
auto
61
79
36
15.4
61
15.4
smooth
61
79
36
15.4
61
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
html {
  scroll-behavior: smooth;
}

/* Apply only to specific containers */
.scroll-area {
  scroll-behavior: smooth;
  overflow-y: auto;
}

ライブデモ

smooth スクロール

scroll-behavior: smooth の smooth スクロール パターンです。

プレビュー全画面表示

auto（即座に移動）

scroll-behavior: smooth の auto（即座に移動） パターンです。

プレビュー全画面表示

CSS で指定

scroll-behavior: smooth の CSS で指定 パターンです。

プレビュー全画面表示

実務での使いどころ

  • ページ内リンク

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

注意点

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

フォールバック戦略

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

アクセシビリティ

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

参考リンク