JQuery Scrolling Effect for Designers

Share on twitter
Twitter
Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on reddit
Reddit
Share on pinterest
Pinterest
Share on twitter
Share on facebook
Share on linkedin
Share on reddit
Share on pinterest

# TLDR

Learn how to create a cool JQuery scrolling effect on your site using only simple hyperlink jump anchors and a bit of JQuery code.

# Full Post

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 Productions 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…

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 Someplace</a>

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

<a name="jump" href="#"></div>

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(/^\//,")
&amp;&amp; location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length &amp;&amp; $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset - 125}, 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 “[su_highlight background=”#ddff99″]scrolling.js[/su_highlight]” 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 [su_highlight background=”#ddff99″]<head>[/su_highlight] section of your site.

To refer to the file, place the following code in between your [su_highlight background=”#ddff99″]<head></head>[/su_highlight] 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.

Jacob Stoops

Jacob Stoops

Long-time SEO and podcast host. Senior Manager at Search Discovery. Husband. Dad. Mob movie aficionado. @jacobstoops