CSS scroll-behavior Property

Definition and Usage

The scroll-behavior property sets how a scrolling box moves when scrolling is triggered by navigation (such as clicking an in-page link) or by certain CSSOM scroll APIs.

Use smooth for an animated jump, or auto for an instant jump. Set it on html for the viewport, or on a box with overflow: auto / scroll. It is not inherited. The initial value is auto.

CSS Syntax

Example: html { scroll-behavior: smooth; }

Property Values

How to Use scroll-behavior

Pick the scrolling box, set smooth or auto, then respect reduced motion.

1. For the whole page, set scroll-behavior on html (not only body).
2. For an inner box, give it a fixed height and overflow: auto, then set scroll-behavior on that box.
3. Add in-page links (href="#section") so navigation scrolling can be seen.
4. Respect prefers-reduced-motion so smooth scrolling stays optional for motion-sensitive users.

Live Preview

Click a link inside the box. Switch scroll-behavior between smooth and auto and compare the jump.

CSS Examples

Each snippet focuses on scroll-behavior. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  .box {
    height: 160px;
    overflow: auto;
    scroll-behavior: smooth;
  }
  .panel {
    height: 160px;
  }
</style>

<p>
  <a href="#a">A</a>
  <a href="#b">B</a>
</p>
<div class="box">
  <div id="a" class="panel">A</div>
  <div id="b" class="panel">B</div>
</div>

<style>
  html {
    scroll-behavior: smooth;
  }
  section {
    height: 100vh;
  }
</style>

<p>
  <a href="#one">One</a>
  <a href="#two">Two</a>
</p>
<section id="one">One</section>
<section id="two">Two</section>

<style>
  html {
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
</style>

Key Takeaways