TOC

TOC is a jQuery plugin that will automatically generate a table of contents for your page. You can see an example of it on the left side of the page.

Features

Completely customizable

Click to smooth scroll to that spot on the page

Automatically highlight the current section

Extremely lightweight (744 bytes gzipped)

Can have multiple on a page

Download

Usage

$( '#toc' ).toc();

Options

Defaults shown below

$( '#toc' ).toc({ 'selectors' : 'h1,h2,h3' , 'container' : 'body' , 'smoothScrolling' : true , 'prefix' : 'toc' , 'onHighlight' : function (el) {}, 'highlightOnScroll' : true , 'highlightOffset' : 100 , 'anchorName' : function (i, heading, prefix) { return prefix+i; }, 'headerText' : function (i, heading, $heading) { return $heading.text(); }, 'itemClass' : function (i, heading, $heading, prefix) { return $heading[ 0 ].tagName.toLowerCase(); } });

Example CSS

#toc { top : 0 px ; left : 0 px ; height : 100 % ; position : fixed ; background : #333 ; box-shadow : inset - 5 px 0 5 px 0 px #000 ; width : 150 px ; padding-top : 20 px ; color : #fff ; } #toc ul { margin : 0 ; padding : 0 ; list-style : none ; } #toc li { padding : 5 px 10 px ; } #toc a { color : #fff ; text-decoration : none ; display : block ; } #toc .toc-h2 { padding-left : 10 px ; } #toc .toc-h3 { padding-left : 20 px ; } #toc .toc-active { background : #336699 ; box-shadow : inset - 5 px 0 px 10 px - 5 px #000 ; }

History

View

Future

Figure out how to handle headlines on bottom of page

Zepto.js support (should work, need to verify)

Ender support

Contributors