What Is CSS scroll-behavior: smooth in Navigation?
The CSS scroll-behavior: smooth property enables an
animated, fluid scrolling transition instead of an abrupt jump when
navigating between anchor links on a webpage. In modern web
navigation—such as single-page applications, sticky menus,
table-of-contents sidebars, and "back-to-top" buttons—this property
improves user experience by providing clear visual context of where the
user is moving within the document.
How scroll-behavior: smooth Works
By default, web browsers apply scroll-behavior: auto.
When a visitor clicks an in-page anchor link (such as
<a href="#contact">Contact</a>), the browser
instantly snaps the viewport directly to the target element.
Applying scroll-behavior: smooth tells the browser's
rendering engine to interpolate the scroll position over a brief
duration:
html {
scroll-behavior: smooth;
}When set on the root <html> element, any
navigation event triggered by an internal hash link smoothly animates
the viewport down or up to the destination. It can also be applied to
specific overflowing container elements (overflow-y: auto
or overflow-y: scroll) to animate internal navigation
inside carousels, side panels, or data tables.
Key Use Cases in Web Navigation
- Single-Page Websites: Keeps users oriented as they transition between full-height hero, features, pricing, and contact sections.
- Sticky Navigation Bars: Connects the active header links to their corresponding page sections without disorienting shifts in perspective.
- Documentation & Long-form Content: Allows readers to jump between entries in a table of contents while retaining a clear sense of document depth and order.
- Return-to-Top Actions: Provides a polished, non-jarring return to the header when clicking a floating footer button.
Accessibility Considerations and Best Practices
While smooth scrolling enhances visual continuity, sudden automatic
movement can trigger motion sickness or vestibular discomfort for some
users. To maintain accessibility standards, wrap the declaration in the
prefers-reduced-motion media query:
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}This ensures that users who have enabled motion-reduction settings at the operating-system level receive standard instantaneous navigation, while other visitors experience smooth scrolling transitions without requiring custom JavaScript libraries.