# CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ

URL: https://webrandum.net/css-scroll-behavior/
公開日: 2020-03-06
更新日: 2020-04-05
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

ページ内リンクをクリックしたときに、ページがキレイにスクロールしながら移動するいわゆる「スムーススクロール（スムーズスクロールと言う人もいますが、英語だとSmooth Scrollなので、この記事ではスムーススクロールに統一します）」。

ひと昔前だとjQueryを活用したり、`window.scroll`を使ったりが必要でしたが、CSSでも実現ができます。

## scroll-behavior

`scroll-behavior: smooth;`を指定してあげると、ページ内リンクをクリックしたときにスムーススクロールになります。

1行追加するだけなので非常にラクですね。

```
html {
  scroll-behavior: smooth;
}
```

実際のサンプルは下記になります。

See the Pen [scroll-behavior: smooth;](https://codepen.io/31mskz10/pen/JjdrLoK) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

ちゃんとページ内リンクをクリックするとスムーススクロールになっています。

JavaScriptは一切使用していないのが分かると思います。

### 対応ブラウザ

いままで何行もJavaScriptを書く必要があったのを考えると、1行で実装が済んでしまう`scroll-behavior`は非常に便利なのですが、対応ブラウザがまだ微妙です。

[![Data on support for the css-scroll-behavior feature across the major browsers from caniuse.com](https://caniuse.bitsofco.de/image/css-scroll-behavior.png)](http://caniuse.com/#feat=css-scroll-behavior)

IE11は切ってしまってもいい気がしますが、Safariに対応していません。

### その他の問題

1行でスムーススクロールの設定ができてしまうので、細かい調整ができないのは問題でもあります。

- ページ上部に固定ヘッダーなどがあって、遷移先の数ピクセル上までスクロールなどの細かい調整ができない

- 全てのページ内リンクがスムーススクロールになってしまう

- アニメーションスピードの設定はできない

細かく設定したい場合は、いままで通りJavaScriptを使う必要がありそうです。