Generating A Table Of Contents with Pure JavaScript – TOC

Preview:

Description:

TOC is a jQuery-free JavaScript plugin that automatically generates a table of contents from HTML heading tags of your long content.

How to use it:

Load the toc.js JavaScript library in your document.

<script src="src/toc.js"></script>

Returns an ordered-list of headers in page content.

varlist =initTOC(options);

Then you can append it to anywhere you like.

container.appendChild(list);

It also works with jQuery library. Add the following JavaScript snippet after jQuery library.

$(elem).initTOC(options);

All the options.

initTOC({
  // headers selector
  selector:'h1, h2, h3, h4, h5, h6',
  // selector to specify elements search scope
  scope:'body',
  // whether to overwrite existed headers' id
  overwrite:false,
  // string to prepend to id/href property
  prefix:'toc'
  
})

Changelog:

v0.0.6 (07/12/2018)

• fix(anchor): use `scrollIntoView` to reset scroll offset