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: http://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: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Watch video How to add Smooth Scrolling to your one page website with jQuery online without registration, duration hours minute second in high quality. This video was added by user Kevin Powell 10 May 2017, don't forget to share it with your friends and acquaintances, it has been viewed on our site 99,796 once and liked it 1.9 thousand people.