Ever click a link and get jolted to the top of the page instantly? Smooth scrolling fixes that! With the CSS scroll-behavior property, you can add a subtle, modern scroll effect to your site with zero JavaScript. It’s perfect for anchor links, back-to-top buttons, or single-page websites. In this MiniCoursey quick guide, you’ll learn what scroll-behavior is, how to use it, and why it makes your user experience feel smoother and more polished.
What is scroll-behavior?
scroll-behavior tells the browser how to handle scrolling triggered by anchor links, focus, or JavaScript methods like scrollIntoView().
Basic Syntax
Apply it to the root element and you’re done!
html {
scroll-behavior: smooth;
}
Now, any in-page link that jumps to an ID will scroll smoothly instead of jumping instantly.
Why Use scroll-behavior?
- Adds a modern, polished feel to navigation.
- No JavaScript needed for simple smooth scrolling.
- Improves user experience and accessibility for long pages.
💡 Pro Tip: Combine with sticky navs or back-to-top buttons for an extra smooth experience.
⚠️ Common Mistake: Don’t overdo smooth scrolling on every scroll action — it’s meant for user-triggered jumps!
FAQ
Q: Does scroll-behavior work in all browsers?
A: Most modern browsers support it — check MDN for legacy support details.
Q: Can I disable it for specific elements?
A: Yes! Override scroll-behavior on specific containers if needed.
Related Link
👉 Check out previous: CSS Accent-Color — Style Form Controls in Seconds
Where to Learn More
Visit MDN’s scroll-behavior docs to see more examples and advanced options.
Conclusion
Congrats — you now know how to add smooth scrolling in seconds with scroll-behavior! A tiny change, but a big UX win.
✨ Bookmark MiniCoursey for more quick & free mini courses!