{"id":43142,"date":"2018-03-09T21:01:47","date_gmt":"2018-03-09T13:01:47","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=43142"},"modified":"2018-03-09T18:23:35","modified_gmt":"2018-03-09T10:23:35","slug":"tocbot-table-of-contents","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/tocbot-table-of-contents\/","title":{"rendered":"Auto-Generate Table of Contents Using Tocbot"},"content":{"rendered":"

Lengthier content is becoming the norm with a stronger reception from Google<\/a> and as well as the users. But it can get a bit tiring to read the long-form content<\/strong> with tons of sub-headings to browse.<\/p>\n

Enter Tocbot<\/a>, a free table of contents generator built on JavaScript<\/strong>. This automatically creates a fixed ToC list on any page and updates your position as you scroll past each heading.<\/p>\n

Read Also:<\/strong> Create Auto-generated Table of Contents with HTML Slots<\/a><\/p>\n

\"tocbot<\/a><\/figure>\n

The main page<\/a> includes a full preview along with documentation you can follow to get this all setup.<\/p>\n

Tocbot has no dependencies and should run in any browser<\/strong> with JavaScript enabled. You just include the Tocbot JS\/CSS files and let \u2019em run. Simple!<\/p>\n

You can even use the CDN versions<\/a> if you don\u2019t want to download anything locally. It\u2019s a pretty simple setup and you can even customize the table of contents<\/strong> to suit your needs.<\/p>\n

However this does require a bit of JavaScript to get it working. Specifically you need to run an init()<\/strong> function with parameters definING where your navigation should appear and which heading(s) you want to target(ie. H1-H6).<\/p>\n

Take a look at the GitHub repo<\/a> for more setup info. This includes browser support, all custom parameters, and the setup instructions<\/strong> for the main JS\/CSS files.<\/p>\n

The API comes with a lot<\/strong> of features you can edit too:<\/p>\n