No Login Data Private Local Save

CSS Smooth Scroll Demo - Online scroll‑behavior

21
0
0
0

CSS scroll-behavior Demo

Instantly compare smooth vs auto scrolling side‑by‑side. Click any section button below to see the difference.

smooth graceful gliding
01
scroll-behavior: smooth
This container scrolls smoothly to each section
02
Native CSS Property
No JavaScript required — pure CSS magic
03
Browser Support
Chrome 61+, Firefox 36+, Edge 79+, Safari 15.4+
04
Scroll Padding
Use scroll-padding-top to offset fixed headers
05
Scroll Margin
Apply scroll-margin-top on target elements
06
Accessibility Matters
Respect prefers-reduced-motion for sensitive users
auto instant jump (default)
01
scroll-behavior: auto
This container jumps instantly — no animation
02
Default Behavior
Browsers use 'auto' by default for all scroll containers
03
Instant Navigation
Useful when users need to jump quickly without delay
04
No Scroll Padding Needed
Instant jumps land exactly where expected
05
Performance
No repainting overhead for scroll animations
06
When to Use Auto
Prefer auto for accessibility or when users opt for reduced motion
Enable Smooth Scrolling (Page-wide)
/* Enable smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
  /* Optional: offset for fixed headers */
  scroll-padding-top: 80px;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
Smooth Scroll for Specific Container
/* Smooth scrolling inside a specific element */
.custom-scroll-box {
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

/* Target elements can use scroll-margin */
.custom-scroll-box .section {
  scroll-margin-top: 16px;
}
Zero JS Needed
Pure CSS. One line. That's it.
Wide Support
All modern browsers since 2018+
Accessibility Ready
Respect prefers-reduced-motion
Enhanced UX
Smooth transitions feel premium

Frequently Asked Questions

Everything you need to know about CSS scroll-behavior

What is CSS scroll-behavior?

scroll-behavior is a CSS property that controls how scrolling behaves when triggered by navigation (anchor links, scrollTo(), etc.). It accepts two values: smooth (animated gliding) and auto (instant jump). It's part of the CSSOM View Module and is widely supported across modern browsers.

How do I enable smooth scrolling on my entire website?

Add html { scroll-behavior: smooth; } to your global stylesheet. This single line enables smooth scrolling for all anchor link navigation across your site. For fixed headers, also set scroll-padding-top to the header height so targets aren't hidden behind it.

Which browsers support scroll-behavior?

Chrome 61+ (Sep 2017), Firefox 36+ (Feb 2015), Edge 79+ (Jan 2020), Safari 15.4+ (Mar 2022), and Opera 48+. Internet Explorer does not support it. Global coverage is approximately 96%+ as of 2025. For unsupported browsers, it gracefully falls back to auto behavior.

What's the difference between scroll-behavior: smooth and JavaScript scrollIntoView?

scroll-behavior: smooth is a declarative CSS solution — it applies to all scroll actions within the element automatically. element.scrollIntoView({ behavior: 'smooth' }) is an imperative JavaScript method for one-off scrolls. CSS is simpler and doesn't require scripting; JS gives you more granular control (e.g., scroll to a specific offset, chain animations). You can use both together.

Can I control the scroll speed or easing with scroll-behavior?

No. The smooth value uses the browser's built-in easing curve, which cannot be customized via CSS. If you need custom speed or easing functions, use JavaScript libraries like Lenis, GSAP ScrollToPlugin, or implement your own requestAnimationFrame loop. The CSS property is designed for simplicity, not fine-tuned control.

Does scroll-behavior affect accessibility?

It can. Some users with vestibular disorders may find smooth scrolling disorienting. Always wrap your smooth-scroll CSS in a @media (prefers-reduced-motion: reduce) query that sets scroll-behavior: auto. This respects the user's system-level accessibility preference. Also, smooth scrolling adds a slight delay before the target is reached, which may impact users relying on instant navigation.

What is scroll-padding and how does it relate to scroll-behavior?

scroll-padding is a CSS shorthand that defines an offset inside the scroll container. When smooth-scrolling to a target, the container stops early by the padding amount, preventing the target from touching the edge. It's especially useful with fixed headers: html { scroll-padding-top: 80px; } ensures anchor targets land 80px below the top of the viewport, clear of a sticky nav bar.

What about scroll-margin — how is it different from scroll-padding?

scroll-margin is applied to the target elements themselves, while scroll-padding is applied to the scroll container. Use scroll-margin-top on individual sections if you want different offsets per target. Use scroll-padding-top on the container for a uniform offset. Both achieve similar visual results but from different sides of the scroll boundary.

Can I use scroll-behavior with horizontal scrolling?

Yes! scroll-behavior works for both vertical and horizontal scrolling. If your container has overflow-x: auto and you navigate horizontally (e.g., via scrollTo({ left: ... })), the smooth or auto behavior applies equally. It's direction-agnostic.

Is scroll-behavior animatable with CSS transitions or keyframes?

No. scroll-behavior is not an animatable property — it's a discrete property. You cannot transition between smooth and auto. The property determines how the scroll action is performed, not a visual style that can be interpolated. It takes effect immediately when changed.

🔧 Related Tools