CSS scroll-behavior Property

Code Examples

A basic implementation applying smooth scrolling to the entire document for anchor link navigation.

<style>
  html {
    scroll-behavior: smooth;
  }
  section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
  }
  #one { background: #f4f4f4; }
  #two { background: #e2e2e2; }
  nav { position: fixed; top: 10px; left: 10px; }
</style>

<nav>
  <a href="#one">Section 1</a>
  <a href="#two">Section 2</a>
</nav>

<section id="one"><h1>First Section</h1></section>
<section id="two"><h1>Second Section</h1></section>

An advanced approach using JavaScript to dynamically enable smooth scrolling on a specific container while respecting accessibility settings.

<style>
  #scrollBox {
    width: 300px;
    height: 200px;
    overflow-y: auto;
    border: 2px solid #333333;
  }
  .content-block {
    height: 400px;
    padding: 20px;
    background-color: #ffffff;
  }
  /* Respect user motion preferences */
  @media (prefers-reduced-motion: no-preference) {
    .is-smooth {
      scroll-behavior: smooth;
    }
  }
</style>

<div id="scrollBox">
  <div id="item1" class="content-block">Start of content</div>
  <div id="item2" class="content-block">Middle of content</div>
  <div id="item3" class="content-block">End of content</div>
</div>

<button onclick="smartScroll()">Smooth Scroll to Bottom</button>

<script>
function smartScroll() {
  const box = document.getElementById("scrollBox");
  const target = document.getElementById("item3");
  
  // Add class to enable smooth behavior dynamically
  box.classList.add("is-smooth");
  
  // Trigger the scroll
  box.scrollTop = target.offsetTop;
  
  // Log status to console
  console.log("Scrolling to: " + target.offsetTop + "px");
}
</script>

Pro Tip

You can use JavaScript to toggle this property on the fly. If you want a specific button click to slide smoothly but want all other navigation to be instant, add a "smooth-scroll" class to your container just before triggering the scroll event, then remove it afterward using a timer or the "scrollend" event.