How to Create a Smooth Scrolling Navigation with jQuery
Creating a one-page smooth scrolling navigation where each navigation item links to a specific section on the page is a very common request and relatively simple to do with jQuery! You should have a base knowledge of HTML, CSS, and jQuery to follow along.
Before we start we need to make sure of two things:
- Each section on the page has a unique ID so we can target it within our HTML
- We have jQuery loaded on the page
Here is the basic HTML structure you need to have:
As you can see in the code above each
href value is corresponding with the section ID which allows us to target them dynamically straight through the HTML.
By default when you click each link it will actually bring you down to the correct section but it jumps down instead of sliding and if you have a fixed navigation it also doesn’t take that into account.
Let’s write some jQuery
Now we’re ready to jump into the jQuery portion of the code. First things first, we need to start with a simple block of jQuery that waits until the page is done loading to allow the code to run.
To put it simply, the reason we do this is if the jQuery code is placed in the
<head> portion of the DOM you will not be able to access certain elements because HTML is interpreted from top to bottom and your HTML elements are not present when your jQuery code runs. In order to solve this problem we add the above code and place everything within it.
Next, we need to now listen for a
click event on the navigation menu items, here’s how we can do that:
Here we are targeting the navigation link selector and then alerting to make sure we are triggering it correctly. The
e.preventDefault() make it so when you click on the links you don’t get the
www.example.com#about hash and it also disables the link functionality completely.
We’re now ready to finalize the code and add the smooth scrolling functionality to our jQuery:
Let’s break down what we just did there, we created a new variable called
targetHref that looks at
this which references the current link that was just clicked and then we grabbed the HTML href
attr('href'). We now have the hashed value we stored in the
href attribute in our HTML.
Next, we use the jQuery
animate function to scroll us down to the
targetHref section by grabbing it’s top position. We then set the speed to be 1000ms which is 1 second. If you’d like to read more about the jQuery animate function you can do that here.
And that’s it! You’ve successfully created a jQuery smooth scrolling navigation without using a plugin with 12 lines of code!
Here’s a working example in case you’d like to dig deeper: http://jsfiddle.net/ev035L6s/
If you have a fixed top navigation you will have to take this a step further and calculate that when scrolling as well, here’s how you’d do it: