CSS
scroll
PureCSS

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

More than 1 year has passed since last update.

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


scroll-behavior

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


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


対応状況


  • Chrome 61+

  • Firefox 36+


参考

おわります。