CSS | scroll-behavior Property

Last Updated : 09 Aug, 2019

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;

Property:

smooth: This property is used to specify the animation effect of scroll between the elements within the scrollable box.

Syntax:

scroll-behavior:smooth;

Example:

<!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</p>
        </div>
          
        <div class="main" id="gfg">
        <a href="#geeks">GEEKSFORGEEKS</a>
        <p style="color:green;">
          A computer science portal for geeks.
        </h3> 
        </div>
    </body>
</html>                    

Output:

auto: It is used to specify the straight jump scroll effect visit to one link to another link within a scrolling box.

Syntax:

scroll-behavior:auto;

Example:

<!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</p>
        </div>
          
        <div class="main" id="gfg">
        <a href="#geeks">GEEKSFORGEEKS</a>
        <p style="color:green;">
         A computer science portal for geeks.
        </h3> 
        </div>
    </body>
</html>                    

Output:

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

Google Chrome 61.0
Firefox 36.0
Opera 48.0

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.

My Personal Notes

Related Articles

CSS | scroll-behavior Property