Well, if you write long posts every now and then and you want your users to access the information in an easy way instead of splitting up the post in several pages, this is a very nice solution to this issue. ## Step one: Add html element to the page

<div id="toc" style="display:none;">Post content:<br /></div>

Step two: Add the javascript

// When page has finished loading
Event.observe(window,'load',function(event) {  
 // Check if the element exists
 if($('toc')){
    var show = false;
    var toc_i = 0;
   // Check the div contaning headings you want to have in your table of contents  
   $$('#post_content h2,#post_content h3').each(function(element){
      toc_i++;
     show      = true;
      // Add an id to the headings for linking
     toc_title_id    = 'article_chapter_' + toc_i;
      $(element).id     = toc_title_id;
      if(element.tagName == 'H3'){          
       $('toc').innerHTML  += '    - <a href="#' + $(element).id + '" onclick="$(element).scrollTo($(element));">' + element.innerHTML.stripTags() + '</a><br /' + '>';       
     }
      else{
        $('toc').innerHTML  += toc_i + '. <a href="#' + $(element).id + '" onclick="$(element).scrollTo($(element));">' + element.innerHTML.stripTags() + '</a><br /' + '>';
      }
      // Scroll to top
     $(element).innerHTML  += '<a href="#post_content" onclick="$(\'post_content\').scrollTo($(\'post_content\'));" class="backToTop">#top</a>';
    }); 
   if(show){
      $('toc').appear();
   }
  }
});

That’s practically it! Enjoy.