The scroll-behavior property

The scroll-behavior property specifies smooth or instant scrolling within an element. The property takes two values ​​auto (instant transition to the element) and smooth (smooth transition).

Syntax

cssselector {
  scroll-behavior: auto or smooth;
}

Example . The auto value

Let's set instant scrolling:

html<div>text</div>

cssdiv {
  scroll-behavior: auto;
  width: 4000px;
  height: 2000px;
  background-color: #C2DDFD;
}

Результат:

Example . The smooth value

Now let's set up smooth scrolling:

html<div>text</div>

cssdiv {
  scroll-behavior: smooth;
  width: 4000px;
  height: 2000px;
  background-color: #C2DDFD;
}

Результат:

See also