scroll-behavior Archives

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:

Part 1

Click Me to Smooth Scroll to Part 2.

Part 2

Click Me to Smooth Scroll to Part 1.

Enjoy coding!