CSS scroll-behavior Property

Last Updated : 04 Aug, 2023

This property is used for smooth animation of scroll position instead of a scroll jump. When the user clicks on links it smoothly performs its operation. It is used to visit one link to another link within a scrollable box.

Syntax:

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

Default Value: auto

Property:

smooth: This property is used to specify the animation effect of the scroll between the elements within the scrollable box.
auto: It is used to specify the straight jump scroll effect visit to one link to another link within a scrolling box.

Example: In this example, we are using scroll-behavior: smooth; property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | scroll-behavior Property
    </title>
    <style>
        .g4g {
            font-size: 40px;
            font-weight: bold;
            color: green;
            text-align: center;
        }
 
        html {
            scroll-behavior: smooth;
        }
 
        #geeks {
            height: 400px;
            background-color: coral;
        }
 
        #gfg {
            height: 400px;
            background-color: lightblue;
        }
 
        a {
            text-decoration: none;
            font-size: 25px;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <div class="g4g">GeeksforGeeks</div>
    <h2 style="text-align:center;">
        Scroll-behaviour:smooth;
    </h2>
 
    <div class="main" id="geeks">
        <a href="#gfg">geeksforgeeks</a>
    </div>
 
    <div class="main" id="gfg">
        <a href="#geeks">GEEKSFORGEEKS</a>
        <p style="color:green;">
            A computer science portal for geeks.
         </p>
    </div>
</body>
</html>

Output:

Example: In this example, we are using scroll-behavior: auto; property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | scroll-behavior Property
    </title>
    <style>
        .g4g {
            font-size: 40px;
            font-weight: bold;
            color: green;
            text-align: center;
        }
 
        html {
            scroll-behavior: auto;
        }
 
        #geeks {
            height: 400px;
            background-color: coral;
        }
 
        #gfg {
            height: 400px;
            background-color: lightblue;
        }
 
        a {
            text-decoration: none;
            font-size: 25px;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <div class="g4g">GeeksforGeeks</div>
    <h2 style="text-align:center;">
        scroll-behaviour:auto;
    </h2>
 
    <div class="main" id="geeks">
        <a href="#gfg">geeksforgeeks</a>
    </div>
 
    <div class="main" id="gfg">
        <a href="#geeks">GEEKSFORGEEKS</a>
        <p style="color:green;">
            A computer science portal for geeks.
        </p>
    </div>
</body>
</html>