Web development

CSS scroll-behavior Property

CSS scroll-behavior Property

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.


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.


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>
.wrap {
  scroll-behavior: smooth;

#part1 {
  height: 300px;
  background-color: #e76f51;

#part2 {
  height: 300px;
  background-color: #2a9d8f;

.link1, .link2 {
  text-decoration: none;   
  background-color: #e9c46a;
  color: #264653;


<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 class="main" id="part2">
  <h3>Part 2</h3>
  <a class="link2" href="#part1">Click Me to Smooth Scroll to Part 1.</a>



Enjoy coding!

Read also:

Scroll Indicator

Scroll To Top Button (smooth scroll effect)

CSS Parallax Scrolling Effect