《CSS》CSS「scroll-behavior」だけでアンカースクロールを実装する方法。

Chrome61がリリースされ、CSSの scroll-behavior プロパティを利用すると、JavaScriptなしのピュアCSSでアンカースクロールが実装できるようになりました。Firefoxでは36+から使えたやつですね。

scroll-behavior

スクロールするボックスを作って、 scroll-behavior に smooth を与えると、アンカースクロールをクリック時にスムーススクロールします。

.wrap {
  height: 100vh;
  overflow: scroll;
  scroll-behavior: smooth;
}

• demo

対応状況

• Chrome 61+
• Firefox 36+

参考

• Smooth Scrolling: The scroll-behavior Property
• scroll-behavior - CSS | MDN

おわります。