Generating A Table Of Contents with Pure JavaScript – TOC

Category: Javascript | July 12, 2018
Author: idiotWu
Views Total: 3,903
Official Page: Go to website
Last Update: July 12, 2018
License: MIT

Preview:

Generating A Table Of Contents with Pure JavaScript – TOC

Description:

TOC is a jQuery-free JavaScript plugin that automatically generate 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

Leave a Reply