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

  • 12
    Like
  • 0
    Comment

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

scroll-behavior

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


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


対応状況

  • Chrome 61+
  • Firefox 36+

参考

おわります。