JQuery Scrolling Effect for Designers

February 3, 2009 // Author: Jacob Stoops // 8,573 views // View Comments

Utilize JQuery to create an awesome scrolling effect on your website's pages.

Want to learn how to do a cool JQuery Scrolling Effect on your site? It’s actually very easy to do! You can thank my good friend Eric Leslie at On Scene Media & Marketing for requesting this JQuery Scrolling Effect Tutorial.

JQuery is an awesome yet easy coding language and there are many other cool things you can do with it. I will try to show you how to implement the JQuery Scrolling Effect on your site in 5 easy steps…

You can see an example of JQuery Scrolling in action on my SEO Dictionary page…

Okay Let’s Get Into It!!!

1.) Download & Install the JQuery Library

The first thing you need to do is download the most current JQuery Library and install it in your site’s root folder.

2.) The HTML Link Anchors

In order to make this effect work, we will need to implement anchor links to that will allow us to jump to certain points on a webpage quickly. Later, JQuery will work its magic to make the transition from link to anchor look much smoother.

Regular HTML Anchor Links look like this:

<a href="#jump">Jump to Bottom</a>

The link for the spot your jumping to looks like this:

<a id="jump" href="#">The Spot</a>

Once you’ve figured out where you want to scroll to and from, implement and place your Link Anchors.

3.) The JQuery Scrolling Effect

Next place the following JQuery code into your preferred HTML Editor.

$(document).ready(function(){
$('a[href*=#jump]').click(function() {
if (location.pathname.replace(/^\//,") == this.pathname.replace(/^\//,")
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});

The only place where you will need to edit anything will be the section that I’ve bolded. All you need to do is place in your Anchor Link’s name or id. If you have more than one spot that your are using Anchor Links for, simply copy & paste the same code and replace the id name.

Once you’ve finished this step, save the file as “scrolling.js” and upload to your site’s root.

4.) Refer to the File

Now that you’ve created, saved, and hosted the JQuery Library and the JQuery Scrolling Javascript, you will need to refer to it in the <head> section of your site.

To refer to the file, place the following code in between your <head></head> tags.

<script type="text/javascript" src="/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/scrolling.js"></script>

Keep in mind that you can name to files any way you like, just make sure to spell them correctly and use the correct files paths when you refer to them. Otherwise our newly learned JQuery Scrolling Effect will not work.

5.) Test it Out!

Now that you’ve successfully completed my JQuery Scrolling Effect tutorial, feel free to surf around your site and test out it’s cool new functionality! Also, if you have any suggestions for me regarding articles leave a comment or contact me via email.

Photo Credit: New BZhu on Flickr

Tags: Coding, JQuery, Web Design

Like This Post? Why Not Share it.

If you like this post, then you might like these as well!

chris

OK thanks, I had considered that as an option but it didn't seem very efficient. I am approaching this from a flash background and assumed that adding or subtracting a value from the variable that we are scrolling to would do the trick but it seems not.

Thanks again for your help and quick responses.

Chris
chris

Great tutorial, nice and easy to follow. One question though, how do I add an extra value to the scroll destination, say for example another 40 pixels?

I am sure its very obvious but I am new to all this so please excuse my ignorance.

Thanks in advance

Chris
chris

Sorry, I wasnt very clear, basically I want to scroll to the destination but leave a gap above the content. I presume its something olong the lines of adding -40px somewhere?

If your still unclear please view this example where each images links to the next but appears with a gap at the top.

http://www.studiomakgill.com/disciplines/web/black_eyewear/details#img436

Thanks

Chris
jacobstoops

I don't know of anything that you can write into the JQuery to do that, however you might be able to achieve this by simply scrolling to a different portion of the page via a blank link anchor...

a name="youranchor" href="#"

Something like that might work if you put it in the position that you want to scroll to? Sorry it's not a very technical answer, but I hope this helps...
jacobstoops

Not sure what you mean by extra value in relation to 40 pixels, please expand a bit and I'll see if I can help?
Vicky

brilliant tutorial, I was tearing my hair out trying to figure out how to do this then found you post and so simple!!
thank you!
jacobstoops

Glad I could help Vicky.
John

Dude, would really help if you put a friggen example of what it will look like somewhere so we can see it before doing the whole tutorial!
Jacob Stoops

An example is now included in the article. Took me a while to get back to this as I was working on the re-design.
Jacob Stoops

Apologies. I had an example before my recent redesign. I'll get one back in there shortly!
Eric Leslie

Excellent presentation and execution of this mark!

JQuery is a fun tool, I love the way it helps make your page flow dynamic!