In this article, I'll be showing you how to add smooth scrolling to your website with just one line of CSS.

But firstly, what is smooth scrolling?

What Is Smooth Scrolling?

Imagine a scenario when you have a button that navigates to a different section of your website. With smooth scrolling enabled, clicking that button will smoothly scroll to that section of the website rather than instantly snapping.

See it in action:

Hit the 'About Me' link on this website.

You will notice it smoothly scrolls down to the about section.

This effect is present on plenty of websites and is a useful arrow in your quiver so let's get into the code.

The CSS

To add smooth scrolling to your website simply add the following code to your CSS file:

html { scroll-behavior: smooth }

That's it. You have now added smooth scrolling to your website.

There is one caveat with this method that is its not supported by Safari (at least not on mobile) but other than that it is a great solution that doesn't involve any JavaScript.

Take Away

In this article, I've shown you how to add smooth scrolling to your website with just one line of CSS. Pretty cool right?

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃