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

My Personal Notes

Related Articles