Simple single-page smooth scrolling

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[Ed-gdec]

Please bring more and more of such powerfull shorts of CSS/JS.
Thanks

[sgbbco]

Hands down some of the best if not the best shorts on YT. Thank you for always offering up useful tidbits that are actually applicable in daily life.

[shgyskzer]

I just have my <nav> height controlled by the same custom property that also sets scroll padding.

[nagarajansubramani]

What I really learnt from this is that you can manipulate CSS variables from Javascript, and how to. 🙏

[walky]

When one short defeats 99% of the pages who mislead you for this same concept! DUDE you are awesome!

[andresmorantes]

I love you Kevin I spent a lot of hours playing with the JS Scroll events and then you save my day using CSS, Thank you very much

[imluissebastian]

No matter how familiar or new I am to something I always find your videos useful and entertaining. Thanks for sharing. Cheers

[cedrictheveneau]

Since I’ve started messing around with JS, it truly transformed my point of view over CSS, it makes it sooo much more powerful, even though CSS3 really is powerful on its own, JS brings it to the next level

[patricknelson]

Yes! More devs need to know about this. Another great reason to support this is to ensure #hash links work seamlessly with your sticky headers. All too often I see sites linking to positions within the page that are _confusingly_ not visible or otherwise overlapped by their (also probably too big) sticky header.

[wlockuz]

I recently ran into this problem and thought there was no solution for it. You sir are a wizard.

[lookupverazhou]

Dude is a legit pro. I don't just mean at web dev, but teaching it as well.

[omarnur]

This guy understands our current problems 🪄🪄 Keep going Kevin .

[dylanthony]

I’ve had this issue with the scroll being to far last night and I said I’ll figure it out tomorrow. I’m so glad I found my answer without even looking for it

[sanjanabhat]

You're a life saver Kevin! This was exactly what I needed!

[abdelkouddoussmekkaoui]

You are a life saver man, I was stragling with this problem for days
Thank you

[cliffordnelson]

oh!!! you can use JS to set CSS Vars 🤯😄 I needed this, Thank you!!

[balogunmuhammadawwal]

Thanks Kevin, you have always been there for me 🙂

[mixxxer]

I had no idea you could set css variable values with js. That is super powerful.

[eternallyMarsh]

Or you can just set the scroll-padding to the same height you set for the navbar

[anthonybradshaw]

Never heard of scroll-padding before - what a great solution!