Table of Content for SharePoint Pages - using Javascript and Jquery

Note: We are not talking about the Table Of Contents Web Part here. We are talking about a table of page content, a table which get's all the headings of a single page and generates a Table of Content.

Generally we use Javascript and Jquery for this approach.

Part 1
A simple Table of Content for Article Pages

You can use following code for Article Pages, Publishing Pages, etc. 

1. Create a HTML file with this content

Paste this code into a file named TableOfContent.html

2. Copy this file to the Site Assets Library

3. Create your article page and insert the code

Herefore, insert a Content Editor Webpart and point the "Content Link" to your newly created html code file.

Set "Chrome Type" to None.

Save the page - Done!

Found at http://blog.orbit.de/2014/08/19/dynamisches-inhaltsverzeichnis-fuer-sharepoint-2013-wiki-seiten/ (German Site)

Part 2
Table of Content in your Enterprise Wiki Page

This is a more complicated approach. In Enterprise Wiki Pages you have this Basic Page Layout with a sidebar which shows you page rating and categories. With following solution, you'll be able to place a Table of Content inside this sidebar.

This solution makes use of 4 files (+ Jquery).

1. CSS File "sp.tableOfContents.css"

2. JavaScript File "sp.tableOfContentsSticky.js" with additional configurations (scroll then stick on top)

3. Javascript File "sp.tableOfContents.js" which contains the magic

4. Javascript File "TableOfContents.conf.js" with some additional configurations

5. References to those files

Now you have two possibilities.

A) You save those files in the Site Asset Library and insert following references with a code snippet/script editor into your Enterprise Wiki Page:


or:

B) You create a new Page Layout which contains those references.

For more instructions regarding this method, please refer to the original blog post written by Stefan Bauer some years ago: Table of Contents for SharePoint Wiki Pages

Many thanks to him for this great solution! --> www.n8d.at

I zipped all files, you can get it here: Download TableOfContent.zip

Edit 13.06.2018: A reader asked, what to do if your ToC would become too long (bc of too many headings). In this case you have to forgo the sticky part, otherwise the last few headings/links would be outside of your screen. So in this case, simply leave the sp.tableOfContentsSticky.js out.