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><divclass="g4g">GeeksforGeeks</div><h2style="text-align:center;">Scroll-behaviour:smooth;</h2><divclass="main"id="geeks"><ahref="#gfg">geeksforgeeks</p></div><divclass="main"id="gfg"><ahref="#geeks">GEEKSFORGEEKS</a><pstyle="color:green;">A computer science portal for geeks.</h3></div></body></html>Output:
/li>
- 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><divclass="g4g">GeeksforGeeks</div><h2style="text-align:center;">scroll-behaviour:auto;</h2><divclass="main"id="geeks"><ahref="#gfg">geeksforgeeks</p></div><divclass="main"id="gfg"><ahref="#geeks">GEEKSFORGEEKS</a><pstyle="color:green;">A computer science portal for geeks.</h3></div></body></html>Output:
leave a comment
0 Comments