DEV Community

Cover image for Smooth Scrolling with Only 1 line of CSS (CSS Mastery)

Smooth Scrolling with Only 1 line of CSS (CSS Mastery)

Coder Champ
Coder Champ ➑ Become a better & rock solid Web Developer with 1 Post a Week πŸš€ πŸ”₯ Front-end: CSS, JavaScript, ReactJS πŸ’“ Back-end: Node, PHP, Laravel 😍Quick Tips & Tricks
・Updated on ・1 min read

Smooth Scrolling with Pure CSS was not even possible until this property got revealed.

Yeah, you will see tons of tutorials out there about this single property which is scroll-behavior: smooth.

How we can use it in our project?

It's simple and really straight forward.

Steps are simple:

  1. We made three different sections (Home, About, Features) and assign them IDs
  2. In the navbar we reference those IDs as #home, #about and #features.
  3. Then we added our magical property in main html tag scroll-behavior: smooth.
  4. That's it. It became smooth, try to click on home, about and features. You will see smoothness in scrolling.

Code Available at CodePen:


Video Guide Perks:
5 Tips to master CSS | Coder Champ

Discussion (0)