How to Create a jQuery Smooth Scrolling Effect

Creating a jQuery smooth scrolling effect when navigating to a specific section on the page is relatively simple to do! jQuery makes creating scrolling effects much easier than vanilla JavaScript and makes sure it’s browser friendly.

How to Create a jQuery Smooth Scrolling Effect

Before we start we need to make sure of two things:

  1. Each section on the page has a unique ID so we can target it within our HTML
  2. We have jQuery loaded on the page

jQuery Smooth Scrolling HTML structure:

<ul id="main-nav">
	<li><a href="#about">About</a></li>
	<li><a href="#how-it-works">How It Works</a></li>
	<li><a href="#submit-case">Submit a Case</a></li>
	<li><a href="#contact">Contact</a></li>
</ul>
<section id="about">
	<h2>About Section</h2>
</section>
<section id="how-it-works">
	<h2>How It Works Section</h2>
</section>
<section id="submit-case">
	<h2>Submit a Case Section</h2>
</section>
<section id="contact">
	<h2>Contact Section</h2>
</section>

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 Smooth Scrolling:

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.

$(document).ready(function() {
	
});

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:

$(document).ready(function() {
  $('#main-nav li a').click(function(e) {
  	
    alert('Clicked');
    
    e.preventDefault();
  });
});

Here we are targeting the navigation link selector and then alerting to make sure we are triggering it correctly. The function(e) and 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 jquery smooth scrolling functionality:

$(document).ready(function() {
  $('#main-nav li a').click(function(e) {
  	
  	var targetHref = $(this).attr('href');
	  
	$('html, body').animate({
		scrollTop: $(targetHref).offset().top
	}, 1000);
    
    e.preventDefault();
  });
});

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 attribute using 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 its 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/

jQuery Smooth Scrolling Bonus:

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:

$(document).ready(function() {
	
  var headerHeight = $('header').outerHeight(); // Target your header navigation here
	
  $('#main-nav li a').click(function(e) {
  	
  	var targetHref   = $(this).attr('href');
	  
	$('html, body').animate({
		scrollTop: $(targetHref).offset().top - headerHeight // Add it to the calculation here
	}, 1000);
    
    e.preventDefault();
  });
});

Ready to work with us?

Let's build something badass.