CSS scroll-behavior Property

Instead of a scroll jump, this property is used for smooth animation of scroll position. When the user clicks on links, the program runs smoothly. It is used to navigate from one link to another within a scrollable box.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    html {
        scroll-behavior: smooth;
    }
    .hero {
        height: 500px;
        background-color: lightgreen;
    }
    .about {
        height: 500px;
        background-color: lightpink;
    }
</style>
</head>
<body>

<div class="hero" id="section1">
    <h2>Section 1</h2>
    <p>Click on the link to see the "smooth" scrolling effect.</p>
    <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
    <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>

<div class="about" id="section2">
    <h2>Section 2</h2>
    <a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>

</body>
</html>

Preview

Property Values

Value	Description
auto	Allows for a direct "scroll effect" jump between elements within the scrolling box. This is the default setting.
smooth	Allows for a smooth animated "scroll effect" between scrolling box elements.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
scroll-behavior	61.0	36.0	14.0	79.0	48.0

row-gap

tab-size

CSS scroll-behavior Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us