· 1 min read

How to do smooth scroll with one line of CSS

# Frontend
This article was auto-translated from Chinese. Some nuances may be lost in translation.

Just when I was happily implementing smooth-scroll with Svelte, I discovered that it can actually be achieved with just one line of CSS:

html {
  scroll-behavior: smooth;
}

Aside from having to consider browser support, this completely eliminates the hassle for developers of importing a library or implementing it themselves.

Screenshot_2020-05-07 scroll-behavior

This perfectly implements smooth-scroll without needing to rewrite the behavior of hashchange and state change. I’ll write another article soon on how to achieve smooth-scroll without using CSS.