CSS scroll-behavior Property

❮ Prev Next ❯

The CSS scroll-behavior property defines whether the scroll behavior should be smooth or abrupt within a scrollable box.

This property does not have an effect on scrolls performed by the user. The scroll-behavior property specified on the body element will not propagate to the viewport. It should be specified for the html element.

User agents can ignore this property.

Initial Value	auto
Applies to	Scrolling boxes.
Inherited	No.
Animatable	No.
Version	CSSOM View Module (Working Draft)
DOM Syntax	object.style.scrollBehavior = "smooth";

Syntax

scroll-behavior: auto | smooth | initial | inherit;

Example of the scroll-behavior property with the "auto" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: auto;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Try it Yourself »

Example of the scroll-behavior property with the "smooth" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: smooth;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
auto	There is a abrupt scroll behavior between the elements.
smooth	There is a smooth scroll behavior between the elements.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

Browser support


61.0+	36	✕	48.0+

Practice Your Knowledge

What does the CSS property 'scroll-behavior' control in a webpage?

It controls the text color on a webpage.

It controls the background color of a webpage.

It controls whether a webpage can be scrolled or not.

It controls the scrolling mechanism of the page i.e., whether the page scrolling transitions are smooth.

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

CSS Basics

❮ Prev Next ❯

Do you find this helpful?