How to do smooth scroll with one line of CSS

Written byKalanKalan
💡

If you have any questions or feedback, pleasefill out this form

Japanese原文

Table of Contents

    This post is translated by ChatGPT and originally written in Mandarin, so there may be some inaccuracies or mistakes.

    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.

    ← How to bring Github Actions to your projectWrite a JSON parser from scratch (1) →

    If you found this article helpful, please consider buying me a coffee ☕ It'll make my ordinary day shine ✨

    ☕Buy me a coffee