TOCsic Customizable Table of Contents Plugin for jQuery

TOCsic is a customizable table of contents plugin for jQuery, featuring "go to top" links, smooth scroll and developer-friendly class names.



Include jQuery and TOCsic.js to the header, then specify elements using jQuery selectors to be added to the TOC:

$(document).ready(function() {
  $('h1, h2, ul.myClass li').TOCsic({
    // options goes here


Available TOCsic parameters:

$('h1, h2, ul.myClass li').TOCsic({
  containerClass: 'myTOC', // div container class name of the generated TOC
  listClass: 'myTOCList',    // class name of the generated unordered TOC list
  attachTo: '.attachHere',    // where to add TOC (default: 'body')
  title: 'Table of Contents',    // custom title to be added before the TOC
  titleTag: 'h3',    // custom TOC title tag (default: 'h2')
  scrollSpeed: 800,    // custom scroll speed (default: 500)
  scrollPageTop: false,    // scroll to top of the page or to position of TOC
  topLinkText: 'go to top',    // custom text for "go to top" link(s). If empty, no links will be added
  topLinkTitle: 'Click here to scroll to top',    // custom title attribute for "go to top" link(s)
  topLinkBeforeTarget: true,    // whether to add "go to top" links before or after the target
  oneTopLinkOnly: false,    // if true, only one "go to top" link will be added
  topLinkVisibleAfter: 300,    // if oneTopLinkOnly is true, the "go to top" link will be visible only if the page is scrolled down more than this value (pixels). Use -1 to make always visile.
  topLinkFadeTime: 200,    // if oneTopLinkOnly is true, the "go to top" link will fade in and fade out using this value (milliseconds). Use 0 to disable fading.
  beforeChar: '› ',    // character(s) to be added before TOC items
  afterChar: ' »',    // character(s) to be added after TOC items
  addLevelClass: true    // whether to add class names for TOC items for CSS styling. These classes consists of "toc-" prefix plus the target items's tag name, eg. "toc-h2", "toc-p". Similar tags will have the same class names so they can be styled in the same way.


TOCsic with one fixed "go to top" link
TOCsic with "go to top" links on each target


TOCsic is free. You can use, distribute and modify as you like it. The author is not liable for any damages arising from its use.


TOCsic is provided "as is" and "with all faults." The developer makes no representations or warranties of any kind concerning the safety, suitability, lack of viruses, inaccuracies, typographical errors, or other harmful components of TOCsic. There are inherent dangers in the use of any software, and you are solely responsible for determining whether TOCsic is compatible with your equipment and other software installed on your equipment. You are also solely responsible for the protection of your equipment and backup of your data, and the developer will not be liable for any damages you may suffer in connection with using, modifying, or distributing TOCsic.


TOCsic weighs 6.8 KB and 2.6 KB minified.

Download TOCsic v0.1 | 3 KB

Downloaded 1364 times since 08/2012

Version History

16/03/2013 jQuery 1.9 compatible
12/08/2012 Initial release


comments powered by Disqus