CSS scroll-behavior Property
Last Updated :
28 Aug, 2024
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 visiting one link to another link within a scrolling box.
Example: In this example, we use 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;
}
#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</a>
</div>
<div class="main" id="gfg">
<a href="#geeks">GEEKSFORGEEKS</a>
<p style="color:green;">
A computer science portal for geeks.
</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;
}
#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</a>
</div>
<div class="main" id="gfg">
<a href="#geeks">GEEKSFORGEEKS</a>
<p style="color:green;">
A computer science portal for geeks.
</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