Smooth scrolling effect with pure CSS only

Smooth scrolling does not require JavaScript. Here is a CSS only solution:

1
html {
2
    scroll-behavior: smooth;
3
}
4

5
/* We turn off smooth scrolling for people who have a browser/OS setting to reduce motion effects (e.g. people with motion sickness). */
6
@media screen and (prefers-reduced-motion: reduce) {
7
    html {
8
        scroll-behavior: auto;
9
    }
10
}

If you only want this behavior inside a container, apply it to that element. Otherwise, apply it to the whole document.

Caveats

• At the time of writing this, the scroll-behavior property works in Chrome and Firefox, but not in Edge, IE, or Safari (desktop or mobile). Check the current status here on caniuse.com.
• There is no easing or timing support. If you want to control how fast the animation runs, or the easing pattern in which it animates, you need JavaScript.
• A JavaScript solution can get you more broad browser support.