Enable Smooth Scrolling With One Line of CSS

I'm a full stack developer based in Australia. I write articles about Node.js, React, JavaScript & Web Development to make your learning journey easier ๐
Search for a command to run...

I'm a full stack developer based in Australia. I write articles about Node.js, React, JavaScript & Web Development to make your learning journey easier ๐
That's pretty cool. Is there a way to control the speed of the scroll? I also wonder if this can be done with transition in CSS. ๐ค
I don't think you can control the speed with this method. I believe you would need to implement some JavaScript to do that.
Introduction Website performance is an important aspect of web development. It consists of mainly two things: The speed of your website How usable is your website for visitors? Importance of website performance Website performance is very importa...

There are plenty of native web APIs that have a variety of uses. Here are 5 useful APIs that I use quite often in my web development projects. Clipboard API The clipboard API is a simple method to copy text to a user's clipboard. This can be used in ...

Hey All ๐ In this article, we'll be covering the Fetch API in JavaScript how you can use it to make HTTP requests. What is the Fetch API? The fetch() method provides a simple way to make HTTP requests in JavaScript. It is natively in the browser, me...

Hey All ๐ In this article, we'll be covering 4 mistakes commonly made by people while learning to code that will seriously impact their coding journey. #1 - Copying and Pasting The first mistake I'll talk about is copying and pasting. We've all don...

Introduction There are plenty of units in CSS. From px to vh, there is an abundance of units all with their distinctive use cases. Considering the amount of options, its perfectly reasonably to be confused as to which unit you should use and where. T...

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?
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.
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.
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 ๐