Widely availableSmooth scrolling can improve spatial orientation for some users, but it should remain respectful of user motion preferences.
Interaction Widely available

scroll-behavior

scroll-behavior controls whether browser-driven scrolling jumps instantly or animates smoothly. It affects anchor links and scripted scrolling that uses browser scrolling APIs.

InteractionScrolling

Overview

scroll-behavior controls whether browser-driven scrolling jumps instantly or animates smoothly. It affects anchor links and scripted scrolling that uses browser scrolling APIs.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
scroll-behavior
61
79
36
15.4
61
15.4
auto
61
79
36
15.4
61
15.4
smooth
61
79
36
15.4
61
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
html {
  scroll-behavior: smooth;
}

/* Apply only to specific containers */
.scroll-area {
  scroll-behavior: smooth;
  overflow-y: auto;
}

Live demo

Smooth scroll

scroll-behavior: smooth Smooth scroll demo.

PreviewFullscreen

Auto(immediate to move)

scroll-behavior: smooth Auto(immediate to move) demo.

PreviewFullscreen

specified with CSS

specified demo. with scroll-behavior: smooth CSS

PreviewFullscreen

Use cases

  • Anchor navigation

    Help users track movement when jumping to headings, sections, or table-of-contents links.

  • Documentation layouts

    Large docs and long-form guides benefit from smoother transitions between sections.

Cautions

  • Overused smooth scrolling can feel slow or disorienting, especially in interfaces with frequent jumps.
  • Do not force animated scrolling when the user prefers reduced motion.

Accessibility

  • Pair smooth scrolling with prefers-reduced-motion so motion-sensitive users can avoid unnecessary animation.

Related links

Powered by web-features