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;
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
>
<
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:
<!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
- Firefox 36.0
- Opera 48.0