まだまだ実用的ではない段階のCSSプロパティを無駄に使ってみる企画。今回はスクロールに関する振る舞いを指定できる scroll-behavior です。 概要 スムーズスクロールといえば、マウスホイールでスクローリングするときの挙動(Firefoxではデフォルトで有効なやつ)のことを言ったりもしますが、ここではページ内リンク・・・たとえば目次や「一番上に戻る」ボタンなどを押したときのスクロールを滑らかにするテクニックのことを指します。jQueryを用いて実装しているサイトが多いかと思います。 scroll-behavior はこのページ内スクロールに関する振る舞いを指定できるCSSプロパティで、値は auto と smooth があり、初期値は auto です。smooth を指定するとスムーズスクロールになります。 // 例 html { scroll-behavior: smooth;
![CSSでスムーズスクロールを設定できるプロパティ「scroll-behavior」](https://cdn-ak-scissors.b.st-hatena.com/image/square/17c1b670241b01fbd39efd906b71b33a772af5d5/height=288;version=1;width=512/https%3A%2F%2Fspuit.tech%2Fwp-content%2Fuploads%2F2016%2F07%2Fscroll-behavior-wall.png)