patterncssTip

scroll-behavior: smooth for native smooth scrolling

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

scroll-behaviorsmooth scrollanchor linksscrollIntoViewUX

Problem

Clicking anchor links causes jarring instant jumps to the target section. JavaScript smooth scroll polyfills add complexity and may conflict with other scroll logic.

Solution

Use scroll-behavior: smooth on the scroll container or html element:

/* Global smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Only on specific containers */
.sidebar-nav {
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto; /* disable smooth scroll for motion-sensitive users */
  }
}

/* Also applies to scrollIntoView() and scrollTo() in JS */
/* window.scrollTo({ top: 0, behavior: 'smooth' }) */

Why

scroll-behavior controls whether the browser uses smooth, animated scrolling or instant jumping when programmatic scrolling occurs (anchor navigation, scrollIntoView, scrollTo). smooth uses the browser's native animation, respecting the OS scroll speed settings.

Gotchas

scroll-behavior: smooth is ignored for users with prefers-reduced-motion: reduce in some browsers — but not all. Always add the media query override manually.
Smooth scrolling can conflict with scroll-snap — test the combination carefully.
On-page links that update the URL hash also trigger scroll-behavior.
scroll-behavior does not affect touch-based momentum scrolling on mobile — the browser handles that independently.

Context

Single-page sites with anchor navigation, table of contents, or back-to-top links.

Revisions (0)

No revisions yet.