The scroll-behavior Property in CSS

CSS | scroll-behavior property: Here, we are going to learn about the scroll-behavior property in CSS with examples.
Submitted by Anjali Singh, on December 17, 2019

CSS | scroll-behavior property

Who does not want their links to function smoothly and attractively? This type of functionality is very easy to implement. All you need is a bit of awareness about the property that would help in achieving it. The name of that property is the scroll-behavior property.

The scroll-behavior property in CSS is beneficial for smooth animation of the scroll position instead of jumping directly to the element.

When we need to add links on our page and want the user to click on the links it smoothly performs its operation. Thus, this property helps in a smooth transition from one link to another within a confined scrollable box.

Syntax:

Element {
    scroll-behavior: auto|smooth;
}

This property comprises of two very fundamental attributes. Let us move forward and have a look at them one by one!

scroll-behavior Property values

1) smooth

Smooth, the name itself bears the definition of this property. This property is used to add a smooth animated scroll effect between different elements when we click on a link in a scrolling box.

Syntax:

Element {
    scroll-behavior: smooth;
}

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        html {
            scroll-behavior: smooth;
        }
        
        #div1 {
            height: 400px;
            background-color: #f1f1f1;
        }
        
        #div2 {
            height: 500px;
            background-color: #FFFF33;
        }
    </style>
</head>

<body>
    <div class="main" id="div1">
        <h2>Division 1</h2>
        <p>Click on the link below</p>
        <a href="#div2">Click Me for Smooth Scroll to Section 2 Below</a>
    </div>
    <div class="main" id="div2">
        <h2>Division 2</h2>
        <a href="#div1">Click Me for Smooth Scroll to Section 1 Above</a>
    </div>
</body>

</html>

Output

CSS | scroll-behavior property | Example 1

Go ahead and feel free to run the above code to see the smooth scroll effect.

2) auto

auto is yet another very useful property for scroll-behaviour, this property is used to specify the direct jump scroll effect when the user clicks on a link to another link within a scrolling box. It is also the default value.

Syntax:

Element {
    scroll-behavior: auto;
}

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        html {
            scroll-behavior: auto;
        }
        
        #div1 {
            height: 500px;
            background-color: #f1f1f1;
        }
        
        #div2 {
            height: 300px;
            background-color: #FFFF33;
        }
    </style>
</head>

<body>
    <div class="main" id="div1">
        <h2>Division 1</h2>
        <p>Click on the link below</p>
        <a href="#div2">Click Me to Auto Scroll to Section 2 Below</a>
    </div>
    <div class="main" id="div2">
        <h2>Division 2</h2>
        <a href="#div1">Click Me to Auto Scroll to Section 1 Above</a>
    </div>
</body>

</html>

Output

CSS | scroll-behavior property | Example 2

Why don't you go ahead and run the above code to see the auto-scroll effect?

Word of advice: It is recommendable to apply this property when you are dealing with links as this property would help in smooth functioning and makes your website quite responsive as well.

CSS Tutorial & Examples »

Counters in CSS

The pointer-events Property in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples