Scroll to Anchors With jQuery

×

This post was originally published in 2008
It may contain stale & outdated information. Or it may have grown more awesome with age, like the author.

Raw JavaScript

This post will introduce and explain the “scroll to anchor” method I have used throughout this site. For a demo, click “scroll to Comments”, which you’ll find above.

See how it smoothly scrolls the page until it reaches the comments section? There is another example of it in action on my Photo Selection Smorgasboard, where I’ve used it to allow people to scroll to the different sections of the page, then back up to the top.

Why should you use it? While the traditional method is fine, it doesn’t really scroll, instead snapping straight to the anchor. I find this quite jarring – not part of the experience I attempt to offer visitors to my site.

The scroll method that I use is straight-forward, and is easy to add to any page. The JavaScript code is adapted from that found on Animated Scrolling With jQuery. I found that tutorial a little hard to follow (I think it is written for people with far more skill than I possessed at the time), and was only able to get nice scrolling to work after examining that page’s source and trying things out on my own. The JavaScript I’ve packaged into a snippet for you is taken from that site. Download jQuery scroll to anchors snippet.

As I found it a little difficult, I thought I’d share with you, in simple English, exactly how to implement this smooth scrolling in your site.

1) Download the jQuery JavaScript library, download the jQuery scroll to anchors snippet.

Raw JavaScript for non Rapid Weaver users

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
    $('a[href*=#]:not([href=#])').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) {
                 $('html,body').animate({
                     scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

2) Upload the jQuery file to your server, open page inspector (Command + Shift + i) and select the “Header” tab. Into the Header field, paste:

<script type="text/javascript" src="PATH_TO/jquery.js"></script>

Replace PATH_TO with the URL pointing to this file.

3) Change from the “Header” tab to the “JavaScript” tab. Drag the “Simple Scroller” snippet into this field.

If you have existing jQuery code in your JavaScript tab, remove the 1st and final lines from the “Simple Scroller” snippet, and paste the remainder into the JavaScript tab, between the first and final lines of the existing jQuery code. Reason:

$(function(){
    //    jQuery code
});

Wraps jQuery code, and is needed only once.

Ok, so this page is now set up for scrolling. We just have to add something to scroll from/to.

4) To add a link that scrolls to point X, use:

<a href="#X">Scroll to Point X</a>

And at point X:

<div id="X">Point X</div>

That’s it! When a visitor clicks on the link, the browser window will scroll to Point X – if JavaScript is enabled, the scrolling will be smooth and pretty, but if it isn’t, it’ll still scroll – it just won’t be as luxurious.

To make the “Scroll to Comments” links, this is what I use:

At the top of the page:

<div id="topScroll_to_Anchors"><a href="#commentsScroll_to_Anchors">Scroll to Comments</a></div>

At the top of the comments section:

<div id="commentsScroll_to_Anchors"></div>

Finally, beneath the comments section:

<a href="#topScroll_to_Anchors">Scroll to top</a>

Easy.

No comments | Trackback