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.

Table of Contents

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

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();
  });
});

FAQs

What is jQuery Smooth Scroll?

jQuery Smooth Scroll is a plugin that enhances the scrolling experience on web pages by providing smooth and animated scrolling effects when navigating through different sections of a page.

How does jQuery Smooth Scroll work?

jQuery Smooth Scroll adds a smooth scrolling behavior to anchor links on a web page. When a user clicks on an anchor link, instead of instantly jumping to the target section, the plugin smoothly scrolls to the target position with a customizable animation.

What are the benefits of using jQuery Smooth Scroll?

Using jQuery Smooth Scroll can enhance the user experience on your website in several ways:

It provides a visually appealing and seamless scrolling effect.
It allows for easier navigation within long pages or one-page websites.
It can create a sense of professionalism and polish on your website.

How do I implement jQuery Smooth Scroll on my website?

To implement jQuery Smooth Scroll on your website, you need to include the jQuery library and the jQuery Smooth Scroll plugin in your HTML file. Then, you can apply the smooth scrolling behavior to your anchor links by adding appropriate classes or data attributes and initializing the plugin with your desired settings.

Can I customize the scrolling animation?

Yes, jQuery Smooth Scroll provides various customization options. You can customize the scrolling speed, easing effect, offset, and more. By adjusting these settings, you can achieve the desired scrolling behavior and match it with the overall design and feel of your website.

Does jQuery Smooth Scroll work on mobile devices?

Yes, jQuery Smooth Scroll is designed to work on both desktop and mobile devices. It provides a consistent scrolling experience across different platforms and browsers.