In addition to creating a beautiful website there may come a time when you need to add a little extra user experience into the mix to help deliver that wow factor. One simple addition that can create an interesting effect is smoothly scrolling to elements on your webpage with some type of click action by utilizing jQuery. This type of light weight animation while simple to produce can often impress end users. In this tutorial we will teach you how to easily scroll to a specific element on your webpage using jQuery without the need for a plugin.

Step 1: Your Website Needs jQuery

This tutorial relies on the jQuery JavaScript library in order to function; you must either link directly to jQuery or download the latest version and upload it to your server.

Download jQuery
You can download the latest version of jQuery HERE.

Step 2: Setting up the HTML Elements

In the second step we will need to set up the basic HTML elements which consist of the link element and the target element.

HTML

<a href="#target-element" class="scroll_to">Scroll to Target Element</a>
<section id=”target-element”>Target Element Content</section>

Items to Note:

• This is just an example on how to set up the HTML elements, you may need to modify and adapt this structure to fit your needs.
• Since this is just a basic example on how to set up the HTML elements, we are not providing any CSS; you will need to style this according to your needs.
• Please pay attention to the link element’s class and ID, these will both be referenced in the jQuery code.
• Remember that you may only use 1 ID per webpage, so make sure that you are setting up unique ID’s for each target element.

Step 3: Setting up the jQuery Scroll Effect

In the third and final step we are going to utilize jQuery to create the animation that will smoothly scroll to the target element after the link element is clicked. You’ll want to add the jQuery code below to wherever you like to keep your jQuery (we recommend in the footer).

jQuery

jQuery('.scroll_to').click(function(e){
	var jump = $(this).attr('href');
	var new_position = $(jump).offset();
	$('html, body').stop().animate({ scrollTop: new_position.top }, 500);
	e.preventDefault();
});

Items to Note:

• Make sure that the referenced CSS classes associated with the jQuery function and the actual link element are the same.
• The target element’s ID is being utilized automatically in the jQuery function.
• If you want to control the speed of the animation, adjust the number 500.

Full Code

HTML

<a href="#target-element" class="scroll_to">Scroll to Target Element</a>
<section id=”target-element”>Target Element Content</section>

jQuery

jQuery('.scroll_to').click(function(e){
	var jump = $(this).attr('href');
	var new_position = $(jump).offset();
	$('html, body').stop().animate({ scrollTop: new_position.top }, 500);
	e.preventDefault();
});

Demo

WordPress Project
Here is a recent WordPress site we created, that is currently using this code (the menu near top of page)

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.