半熟前端

軟體工程師 / 台灣人 / 在前端的路上一邊探索其他領域的可能性

本部落格使用 Gatsby 製作

本部落格有使用 Google Analytic 及 Cookie

前端

如何用一行 CSS 做到 smooth scroll

正當我開開心心用 svelte 實作了 smooth-scroll 之後,我發現其實可以用一行 CSS 達到:

css
html {
scroll-behavior: smooth;
}

除了瀏覽器支援可能要擔心一下,完全省掉開發者引入 library 或是自己實作的麻煩。

Screenshot_2020-05-07 scroll-behavior

完美達成 smooth-scroll,不需要再透過改寫 hashchange 跟 state change 的行為。改天再寫一篇文章談談要怎麼不用 CSS 做到 smooth-scroll 好了。

如果覺得這篇文章對你有幫助的話,可以考慮到下面的連結請我喝一杯 ☕️
可以讓我平凡的一天變得閃閃發光 ✨

Buy me a coffee