Smooth scrolling effect with pure CSS only

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

html {
    scroll-behavior: smooth;
}

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

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.

About Author

Mathias Bothe Contact me

I am Mathias, born 38 years ago in Heidelberg, Germany. Today I am living in Munich and Stockholm. I am a passionate IT freelancer with more than 14 years experience in programming, especially in developing web based applications for companies that range from small startups to the big players out there. I am founder of bosy.com, creator of the security service platform BosyProtect© and initiator of several other software projects.