CSS | scroll-behavior Property - Tutorialspoint.dev

This property is used for smooth animation of scroll position instead of a scroll jump. When the user clicks on links it smoothly perform its operation. It is used to visit one link to another link within in 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> 
        <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> 
        <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:

CSS | scroll-behavior Property

tags:

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books