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 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(/^\//,")
&& 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 - 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 “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.
loading...
Pingback: JQuery: Where to begin?? «
Pingback: Fresh JQuery Tutorials | Galaxark Blog
Pingback: Blog | Arnoud Terpstra