WP-Mix

This tutorial shows how to create “scroll-to” links with jQuery. For example, if you want to add a link on your page that smoothly scrolls the user to a specific location, add the following code snippet to your JavaScript file.

Step 1: Add the JavaScript

Once jQuery is included on the page, we can use jQuery’s animate() to implement smooth scrolling. Add the following snippet to your JavaScript:

$('.scroll').on('click',function(e) {
	e.preventDefault();
	var offset = 0;
	var target = this.hash;
	if ($(this).data('offset') != undefined) offset = $(this).data('offset');
	$('html, body').stop().animate({
		'scrollTop': $(target).offset().top - offset
	}, 500, 'swing', function() {
		// window.location.hash = target;
	});
});

The cool thing about this technique is that enables you to specify an offset (in pixels), so that the scroll will stop some distance before the specified target. Here is an example showing how to use this snippet to create a scroll-to link:

<a class="scroll" href="#target">Scroll to Target</a>

Boom! Done. Clicking on that link will scroll the user to the #target element. Basically any link that points to a specific location on the page (via hash tag) can be made into a scroll-to link. Just add the class .scroll, as seen in the previous example.

To specify an offset, add a data-offset attribute to the scroll-to link:

<a class="scroll" href="#target" data-offset="300">Scroll to Target</a>

This example will scroll the user 300 pixels above the target element. Enter any offset value as needed, or omit to scroll to the exact location.

One more note about this technique: as written, the jQuery snippet will not add the hash-tag fragment to the URL. So when you click on the link, the URL displayed in the browser’s address bar will not change. If you would like to append the hash fragment (i.e., the #target) to the URL, simply uncomment the following line:

// window.location.hash = target;

..so it looks like this:

window.location.hash = target;

This will cause the browser to append the target to the URL like so:

http://example.com/page/#target

This may be useful depending on what else is happening on the page. Note that you also can customize the scroll effect by changing the scroll duration, 500, and type of easing, swing. Check out available easing types and other animate options in the jQuery Docs.

Alternate Version

Here is an alternate, simpler version of the previous scroll-to script:

$('.scroll').on('click', function(e) {
	e.preventDefault();
	var target = $(this).attr('href');
	var offset = 0;
	if ($(this).data('offset') != undefined) offset = $(this).data('offset');
	$.scrollTo(target, 300, { offset: -offset });
});

Compare, learn, and have fun customizing and implementing your own scrolling solution.

ScrollTo via jQuery Plugin

Just to mention! The previous scroll-to script requires only that the jQuery library is included on the page. For a more elaborate smooth-scroll technique, check out the jQuery scrollTo plugin.

“It’s all good!”