DEV Community

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

Posted on • Edited on

8

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)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay