CSS scroll-behavior Property
February 10, 2021 12:37 pm IST
CSS scroll-behavior Property CSS scroll-behavior property specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box.
Example <!DOCTYPE html>
<html lang ="en-US" >
<head >
<style >
a {
margin : 10px ;
}
p {
line-height : 3 ;
font-size : 45px ;
text-align : center ;
}
div {
height : 150px ;
width : 150px ;
border : 1px solid black ;
overflow-y : scroll ;
}
#myAuto {
scroll-behavior : auto ;
}
#mySmooth {
scroll-behavior : smooth ;
}
</style >
</head >
<body >
<h1 >CSS scroll-behavior Property</h1 >
<h2 >scroll-behavior: auto;</h2 >
<a href ="#my1" >1</a ><a href ="#my2" >2</a ><a href ="#my3" >3</a >
<div id ="myAuto" >
<p id ="my1" >1</p >
<p id ="my2" >2</p >
<p id ="my3" >3</p >
</div >
<h2 >scroll-behavior: smooth;</h2 >
<a href ="#myA" >A</a ><a href ="#myB" >B</a ><a href ="#myC" >C</a >
<div id ="mySmooth" >
<p id ="myA" >A</p >
<p id ="myB" >B</p >
<p id ="myC" >C</p >
</div >
</body >
</html >
Syntax Using CSS element{
scroll-behavior: scroll;
}
Using Javascript object.style.scrollBehavior="scroll";
Animatable No, scroll-behavior property is not animatable. CSS Animatable Properties Reference.
Default Value Default value for CSS scroll-behavior property is auto .
Property Value The following table provides a list of values for CSS scroll-behavior property.
Value Explanation auto Allows a straight jump. smooth Allows a smooth scrolling.
Using JavaScript In the following example, we will demonstrate how to change the CSS scroll-behavior property of an element using JavaScript.
Example <!DOCTYPE html>
<html lang ="en-US" >
<head >
<style >
a {
margin : 10px ;
}
div > p {
line-height : 3 ;
font-size : 45px ;
text-align : center ;
}
div {
height : 150px ;
width : 150px ;
border : 1px solid black ;
overflow-y : scroll ;
}
</style >
</head >
<body >
<h1 >CSS scroll-behavior Property</h1 >
<a href ="#my1" >1</a ><a href ="#my2" >2</a ><a href ="#my3" >3</a >
<div >
<p id ="my1" >1</p >
<p id ="my2" >2</p >
<p id ="my3" >3</p >
</div >
<button onclick ="myFunction()" >Click Me</button >
<script >
var x = document .getElementsByTagName ("div" )[0 ];
function myFunction (){
x .style .scrollBehavior = "smooth" ;
}
</script >
</body >
</html >
Reminder Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS .
Please do google search for:
Join Our Channel Join our telegram channel to get an instant update on depreciation and new features on HTML , CSS , JavaScript , jQuery , Node.js , PHP and Python .
This channel is primarily useful for Full Stack Web Developer.
Share this Page Meet the Author 
