# scroll-behavior

> スクロール動作をスムーズにするか、即座に移動するかを指定するプロパティです。smooth指定でスムーススクロールが有効になり、アンカーリンクやJavaScriptでのスクロール操作が滑らかになります。

- カテゴリ: インタラクション・UX
- URL: https://www.css-dictionary.com/property/scroll-behavior/

## 構文

```css
scroll-behavior: auto | smooth
```

## Tailwindでは

- `scroll-smooth` → scroll-behavior: smooth
- `scroll-auto` → scroll-behavior: auto
- 補足: motion-reduce:scroll-auto の併記を推奨。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 61+ / Firefox 36+ / Safari 15.4+ / Edge 79+

## コード例

### 例1: 即座にスクロール（デフォルト）

```css
scroll-behavior: auto;
```

### 例2: 滑らかにスクロール

```css
scroll-behavior: smooth;
```

## TIPS

アンカーリンク（#section1など）のスクロールが自動的にスムーズになる。JavaScriptなしで実装可能。

## よくある間違い

htmlまたはスクロールコンテナに指定する必要がある。子要素に指定しても効果がない。ユーザーの設定でモーション削減が有効な場合は無効化される場合がある。

## AIがよく間違えるポイント

html { scroll-behavior: smooth }はページ内リンクを滑らかにしますが、ページ内検索やアンカー着地まで常時スムーズになるのを嫌う場合はJS側のscrollIntoView({behavior})で個別制御します。またprefers-reduced-motion環境ではautoに戻す配慮（メディアクエリで打ち消し）をAIは省略しがちです。

## AIへの依頼文例

- ページ内リンクのスムーススクロールを、prefers-reduced-motion配慮込みで実装して

## 関連プロパティ

- [overflow](https://www.css-dictionary.com/property/overflow.md)
- [scroll-snap-type](https://www.css-dictionary.com/property/scroll-snap-type.md)