Create a smooth scroll effect with CSS only

We used to reach for Javascript to achieve a smooth scrolling effect not so long ago. Even including a whole jQuery library for this effect only was nothing to frown upon. However, as the standards change, some sections of our work become easier. The smooth scrolling effect being one of them.

Usually used as a back-to-top action, it also serves well for linking anchor links, and makes the transition from one part of a page to another a little easier on the eyes.

Nowadays we can achieve this neat effect using native CSS only by adding a scroll behavior property to our html element in CSS:

html {
  scroll-behavior: smooth;
}

Other scroll behavior values are:

scroll-behavior: auto;
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;

However, you will most likely ever only use the “smooth” or “auto” values.