How to add Smooth Scrolling to your one page website with jQuery

Smooth scrolling not only looks cool but, for one-page sites, it can also help make for a better user experience. In this video, I take a look at how you can add smooth scrolling to your site with just a few lines of jQuery.

Not only do I look at smooth scrolling though, but the demo site I'm using it based on Bootstrap, which has a nice 'active' link class which highlights one of the links in the navigation.

I look at how, with a few more lines of jQuery, we can have that active link class switch between links in the navigation as we scroll down the page, once again helping with the user experience!

And sure, you could find some scripts out there that do it for you, but being able to write your own jQuery can be really useful. You're writing the exact code that you need in your one case and not something which is bloated and heavy for no reason.

My goal with this video isn't just for you to be able to copy my code, but to understand a bit more of how jQuery is working and to be able to write a bit of your own scripts going forward.

Find the codepen here: codepen.io/kevinpowell/pen/dWzGox

--

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.

Instagram: instagram.com/kevinpowell.co/
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell