CSS Scroll Behavior — Smooth vs Instant

Want to control how your page scrolls when users click anchor links or buttons? The CSS scroll-behavior property lets you choose between smooth scrolling or instant jumps — all without extra JavaScript! This small but powerful property adds a polished feel to your site, especially for single-page layouts, back-to-top buttons, or in-page navigation. In this MiniCoursey quick guide, you’ll learn what scroll-behavior does, when to use it, and how to combine it with other scrolling techniques.

What is CSS Scroll Behavior?

The scroll-behavior property defines how the browser handles scrolling triggered by navigation or JavaScript. The default is instant, but you can make it smooth for a more modern, user-friendly experience.

Basic Syntax

Set scroll-behavior on an element with scrollable content — or on the html element for the whole page.

html {
  scroll-behavior: smooth;
}

Now, clicking an anchor link like #section2 scrolls smoothly instead of jumping immediately.

When to Use Scroll Behavior

• Single-page sites with anchor links.
• Back-to-top buttons or “jump to section” links.
• Smooth scrolling in scrollable containers like carousels.

Instant vs Smooth

scroll-behavior: auto is the default (instant jump). scroll-behavior: smooth enables gradual scrolling.

💡 Pro Tip: Combine with scroll-snap for sliders and carousels that feel extra polished.

⚠️ Common Mistake: Smooth scroll won’t work if the scroll action is manual (like mouse wheel) — it only affects triggered scrolls.

FAQ

Q: Does it work on all browsers?
A: Mostly! Modern browsers support it well — check MDN for edge cases.

Q: Can I animate scrolling with JS too?
A: Yes — scroll-behavior handles simple cases, but advanced animations still need JavaScript.

Related Link

👉 Check out previous: CSS Scroll Snap — Smooth Scrolling Experiences

Where to Learn More

Try MDN’s Scroll Behavior docs for more examples. Test on anchor-heavy pages to see how smooth scroll instantly upgrades UX.

Conclusion

Congrats — you now know how to switch between instant and smooth scrolling with CSS! Use it for polished navigation that feels effortless.

✨ Bookmark MiniCoursey for more quick & free mini courses!