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

scroll-behavior

The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.

InteractionScrolling

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