CSS | scroll-behavior Property

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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    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:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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>                     
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    

    • 



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


    

  • Google Chrome 61.0
    • 

  • Firefox 36.0
    • 

  • Opera 48.0
    • 



full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
ManasChhabra2
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.