スムーズスクロールをCSSで！

いつもお世話になっております。
今回も前回から続いてCSSの小技をご紹介します。

スムーズスクロール

皆さんはスムーズスクロールという言葉を聞いたことはございますでしょうか？
そうです、ページ内を移動する時にスルスルっと移動するやつです。
以下にGIFアニメをご用意しましたので、ご覧ください。

これまでこの動きを実装するのに、JSを使用してきました。
しかしなんと、CSSでも実装できる聞いては黙っちゃいられない！
ということで、コードが以下になります。

ページの構造としては、追従するヘッダーメニュー、メニューをクリックすると各セクションにアンカーリンクするという極一般的なものです。
ご覧の通り、HTMLに関しては特に変わったことはしていません。

では今回の肝となるCSSを見ていきましょう。
HTMLタグに以下のプロパティが入っています。

・scroll-behavior: smooth;

以上！
これだけでスムーズスクロールが実装できます！
お手軽ですね！今までの苦労は何だったんだ！

ただし、IE、Edge、Safariは未対応です。。。

使えないじゃん、と思われた方、そうです、使えないです。
一応ポリフィルも用意されているようですが、使うメリットはなさそうですよね。
それなら今まで通りJSでやった方がいいよねって感じです。
しかし、今後に期待です！
今後、対応ブラウザが増え、CSSだけでスムーズスクロールを実装できる日も近い（はず）です！
そんな淡い期待を込めて今回はご紹介させていただきました！
皆さんも淡い期待を胸に、さあご一緒に、scroll-behavior: smooth;しましょう！