
The CSS scroll-behavior property defines whether to smoothly animate the scroll position, instead of a straight jump (default), when the user clicks on a link within a scrolling box.
Syntax:
scroll-behavior: auto|smooth;
auto (default) – a straight jump/ scroll effect between elements within the scrolling box.
smooth – a smooth transition/ scrolling effect between elements within the scrolling box.
Demo:
You can add the CSS scroll-behavior: smooth to the <html> element to enable smooth scrolling for the whole page, or you can add it to a specific scroll container:
<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
scroll-behavior: smooth;
}
#part1 {
height: 300px;
background-color: #e76f51;
}
#part2 {
height: 300px;
background-color: #2a9d8f;
}
.link1, .link2 {
text-decoration: none;
background-color: #e9c46a;
padding:10px;
margin-left:15px;
color: #264653;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main" id="part1">
<h3>Part 1</h3>
<a class="link1" href="#part2">Click Me to Smooth Scroll to Part 2 below.</a>
</div>
<div class="main" id="part2">
<h3>Part 2</h3>
<a class="link2" href="#part1">Click Me to Smooth Scroll to Part 1.</a>
</div>
</div>
</body>
</html>
Output:
Enjoy coding!
Read also: