Creating neat automatic scroll-spying table of contents with tocify


Today I want to write about jquery.tocify.js.

Download tocify and extract it somewhere. The files you need are in src/javascripts and src/stylesheets. Personally, I moved these files to assets/css and assets/js accordingly, but it’s up to you to place them wherever you want.
You also need to download jquery and jquery UI. You can optionally use twitter bootstrap to style the table of contentts.

Now that you have all the files you need, it’s time to do the work! Put the stylesheet files in the of the page (obviously with the correct path):

I am using bootstrap here, although it’s optional, to enhance the page design.

And put the scripts at the end of your page, right before </body> (again replace the path):

Now we can finally create our page and it’s table of contents. Tocify needs a div with a unique id or classname, which itself needs to have a parent (other than our page body). What I did was make a <div class="row"> and use a <div class="span3"> for my table of contents and a <div class="span9"> for my page content. Have a look at my bootstrap blog post or the bootstrap documentation about what these things mean.


First year

Computing and Engineering

  • Robert Tables Jr.
  • John Doe
  • Cynthia Mendez

To make tocify work all you need is a bit of:

(You would place this code right before </body>, after you have loaded all the needed javascript files)

Of course, tocify only makes sense if you have quite a bit of content, so ideally you would replace the code i gave for my .span9 with your own, longer content.

If you did it right, You should see something like this (click to enlarge):

As you scroll down, or click on one of the headings, you will see that they expand to show sub-headings:

However, you probably want your table of contents to stick when people scroll down. To do this, you need to write a bit of your own CSS.
Let’s add a new CSS file to the head of the page:

Create that file, and do something like this:

#nav {
     position: fixed;

That’s all it takes! The table of contents will now follow you as you scroll!

Of course, the $(element).tocify() function can take an optional parameter, a javascript object with options. The options API is documented over at the tocify website.

The option that I have used in my cv page was showAndHide: false. What this does is show all the headers from the beginning, rather than expand and collapse them. I personally prefer this as it makes it easier for the user to know what’s going on and to be able to jump to a section, but it’s up to you and your specific needs.

If you want to do this, just change

to this:

And your table of contents will always be expanded!

The one caveat of tocify is that it requires javascript to work. You may want to replace tocify with another table of contents if javascript is disabled. I recommend something like this (twitter bootstrap is required).
(You would put this under your #nav, inside your .span3)

Which is what I did on my cv page. Not as cool, but still looks good. And it needs adjusting to your content, of course!

Well, that’s all for now. I hope this was helpful! Once again, head over to tocify website for the docs.

4 thoughts on “Creating neat automatic scroll-spying table of contents with tocify

  1. How can I make a href link to trigger a nav item(this should scroll to the specific location of the page). I tried many ways, it is not possible as I have seen. Please help me to find a solution

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.