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

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

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

scroll-behavior

scroll-behavior: smooth;を指定してあげると、ページ内リンクをクリックしたときにスムーススクロールになります。
1行追加するだけなので非常にラクですね。

html {
  scroll-behavior: smooth;
}

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

See the Pen scroll-behavior: smooth; by Masakazu Saito (@31mskz10) on CodePen.

ちゃんとページ内リンクをクリックするとスムーススクロールになっています。
JavaScriptは一切使用していないのが分かると思います。

対応ブラウザ

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

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

その他の問題

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

• ページ上部に固定ヘッダーなどがあって、遷移先の数ピクセル上までスクロールなどの細かい調整ができない
• 全てのページ内リンクがスムーススクロールになってしまう
• アニメーションスピードの設定はできない

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