jQuery scrolling page with autogenerated index

Friday, 15 October 2010


In my previous article I wrote about scrollTop and how to get working for your sites. If you haven't had a chance to read it yet and you are not too familiar with scrollTop I suggest you check it out as I will use the techniques from that article in building the example in this tutorial.

What I am going to build today is made up of two parts: an index section and a document section. The index section will list titles in the document and will be built on the fly using jQuery. Clicking on one of the titles in the index will smoothly scroll down to the selected section.

Here is a live demo and you can download the code from here.

How to create the index section:
To begin with we want to loop over all of the titles in our text. In my example I am going to have all of my titles as h2 elements. I am going to use jQuery to loop over all of our h2 elements using the each function.

$("#our_book h2").each(function(index, elem) {
 }); 

Next we need to add an element to the index for each of our titles. I have chosen to have each of these as links.

$("#our_book h2").each(function(index, elem) {
  $("#our_index").append("" + $(elem).html() + "");
 });

So each link has now been added to the "#our_index" div, now we need to bind a click event to each of these links. Let's have a look at the code:

$("#our_index a").click(function() {
  var idx = $("#our_index a").index(this);
  $("#our_book").stop(true).animate({scrollTop: ($("#our_book").scrollTop() + $("#our_book h2:eq(" + idx + ")").position().top)}, {duration: 1500, queue: false});
  return false;
 }); 

To start off we need to get the index of link being clicked. As each link has been added in order that it appears in the "#our_book" section, the index of the link will match the index of the h2 element in the "#our_book" section.

Next we call the stop function on "#our_book", this is done so that when someone clicks multiple links rapidly it doesn't fill up the queue and all animations (on this element) are stopped immediately.

Following we chain on the animate method and we want to scroll to the position of our matching h2 element. To calculate its position we first add the current scroll position of "#our_book" by calling scrollTop. Next we add on the value of the position of the h2 element we are targeting relative to the parent, which is the "#our_book" element. This will give the position of where we need to scroll our "#our_book" element. If this is confusing I suggest checking out my previous post on scrollTop which explains this is further detail.

The final piece of our code is binding mousedown event to the "#our_book" element. We want to stop all animations if someone tries to scroll or clicks on our "#our_book" element. This is so that we are not fighting with the animation if you are trying to scroll up while it is scrolling down or if someone spots something of interest and they want the animation to stop they can just click.

This is a small practical example of using scrollTop which could be used in a variety of ways: intructions, TOS, FAQ etc.
blog comments powered by Disqus