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.

Features

option to add TOC title with custom tag
customizable before and/or after character for TOC items (e.g. arrows or hyphens)
customizable attachTo parameter (defaults to 'body')
"go to top" links on each target, or
one "go to top" link (meant to be used with fixed position)
smooth scroll
user-defined "go to top" link text and title
option to make the fixed "go to top" link visible only if page is scrolled down
scroll to top of the page or to position of TOC (the two can be different)
optional level classes to make CSS styling easier

Usage

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
  });
});

Options

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: '\273 ',    // 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.
});

Demos

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

License

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.

Disclaimer

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.

Download

TOCsic weighs 6.8 KB and 2.6 KB minified.

Download v0.1 | 3 KB

Downloaded 1529 times since 08/2012

Version History

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

TOCsic Customizable Table of Contents Plugin for jQuery