scroll-behavior

If we’re linking between two sections on the same page, it can be nice to create a smooth scroll to that new section. Traditionally, this has always required Javascript.

Now, we can do this in pure CSS with the scroll-behavior:

body {
    scroll-behavior: smooth;
}

Adding this to your CSS will create a smooth transition for links that cause the user’s page to scroll:

See the Pen (@websmyth) on CodePen.

Is it supported though?

Browser support is reasonably good. Key exceptions are: Safari, Internet Explorer and pre-2020 versions of Microsoft Edge.

Found this useful?

CSS For Designers is a practical guide to CSS, helping people bring their CSS knowledge up-to-date and learn how the language actually works.

Preview the course