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:
- We made three different sections (Home, About, Features) and assign them IDs
- In the navbar we reference those IDs as #home, #about and #features.
- Then we added our magical property in main html tag scroll-behavior: smooth.
- 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