スクロール動作をスムーズにするか、即座に移動するかを指定するプロパティです。smooth指定でスムーススクロールが有効になり、アンカーリンクやJavaScriptでのスクロール操作が滑らかになります。
scroll-behavior: auto | smooth| scroll-smooth | scroll-behavior: smooth |
| scroll-auto | scroll-behavior: auto |
motion-reduce:scroll-auto の併記を推奨。
scroll-behavior: auto;即座にスクロール(デフォルト)
scroll-behavior: smooth;滑らかにスクロール
アンカーリンク(#section1など)のスクロールが自動的にスムーズになる。JavaScriptなしで実装可能。
htmlまたはスクロールコンテナに指定する必要がある。子要素に指定しても効果がない。ユーザーの設定でモーション削減が有効な場合は無効化される場合がある。
html { scroll-behavior: smooth }はページ内リンクを滑らかにしますが、ページ内検索やアンカー着地まで常時スムーズになるのを嫌う場合はJS側のscrollIntoView({behavior})で個別制御します。またprefers-reduced-motion環境ではautoに戻す配慮(メディアクエリで打ち消し)をAIは省略しがちです。
ページ内リンクのスムーススクロールを、prefers-reduced-motion配慮込みで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。