DEV Community

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

Posted on • Edited on

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

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:

Thanks

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

Top comments (0)