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;
Default Value :
- auto
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:
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</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:
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</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
- Edge 79.0
- Firefox 36.0
- Opera 48.0
- Safari 15.4
Please Login to comment...