logo
  • 現在做什麼
  • 關於我

Kalan

文章分類

  • 前端
  • 開發筆記
  • 雜談
  • 年度回顧

快速連結

  • 現在做什麼
  • 關於我
  • 聯絡我
  • 職涯思考🔗

關注我

在福岡生活的開發者,分享軟體開發與日本生活的點點滴滴。

© 2025 Kalan Made with ❤️. All rights reserved.

How to do smooth scroll with one line of CSS

Written byKalanKalanMay 7, 2020
Home/Frontend
💡

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