Open In App
Related Articles

CSS scroll-behavior Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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>

                    

Output:

Supported Browsers: The browsers supported by scroll-behavior Property are listed below:

  • Google Chrome 61.0
  • Edge 79.0
  • Firefox 36.0
  • Opera 48.0
  • Safari 15.4


Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads