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 the scroll between the elements within the scrollable box.
- auto: It is used to specify the straight jump scroll effect visit to one link to another link within a scrolling box.
Example: In this example, we are using scroll-behavior: smooth; property.
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; } #Beginner { 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" >w3wiki</ div > < h2 style = "text-align:center;" > Scroll-behaviour:smooth; </ h2 > < div class = "main" id = "Beginner" > < a href = "#gfg" >w3wiki</ a > </ div > < div class = "main" id = "gfg" > < a href = "#Beginner" >w3wiki</ a > < p style = "color:green;" > A computer science portal for Beginner. </ p > </ div > </ body > </ html > |
Output:
Example: In this example, we are using scroll-behavior: auto; property.
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; } #Beginner { 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" >w3wiki</ div > < h2 style = "text-align:center;" > scroll-behaviour:auto; </ h2 > < div class = "main" id = "Beginner" > < a href = "#gfg" >w3wiki</ a > </ div > < div class = "main" id = "gfg" > < a href = "#Beginner" >w3wiki</ a > < p style = "color:green;" > A computer science portal for Beginner. </ p > </ 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
Contact Us