<!-- 
The TOC Container.
The most important thing to note is the ID.
The ID is used by the CSS and the JavaScript code.
-->
<ul id="sp-toc"></ul>

<style type="text/css">
    #sp-toc {
        padding: 10px; /* Add a padding between the border and the TOC content */
        background-color: #f9f9f9; /* Add a background color of the TOC */
        min-width: 200px; /* Add only a minimal width like that, the TOC can be extensible */
        display: inline-block;
        border: 1px solid #aaaaaa; /* Add a border arround the TOC */
        list-style:none; /* Remove default style list */
    }
    #sp-toc li {
        /* If you need to add custom style on all <li> */
    }
    #sp-toc li a {
        text-decoration: none; /* Remove default link underline */
    }
    #sp-toc .class-toc-h2 {
        /* currently, the first level supported by the script */
    }
    #sp-toc .class-toc-h3 {
        padding-left: 20px; /* Add a indentation for the 2e level of title */
    }
    #sp-toc .class-toc-h4 {
        padding-left: 40px; /* Add a indentation greatter than the previous one */
    }
</style>
<script type="text/javascript">
    /**
     * The main function to build TOC
     */
    function buildToc() {
        /* Init title level counters */
        var countH2 = countH3 = countH4 = 0;

        /**
         * DOMElement : the TOC container retrieved by ID
         */
        var toc = document.getElementById("sp-toc");
    
        /**
         * Insert into TOC container the chapters
         */
        toc.innerHTML = nodesToc();

        /**
         * TOC Builder
         */
        function nodesToc() {
            /* Get all HTML tags from the current page */
            var obj = document.getElementsByTagName("*");
            var tagList = "H2;H3;H4;";
            var str = "";
            /* Loop on each HTML tag */
            for (var i = 0; i < obj.length; i++) {
                /* If tag is a title tag */
                if (tagList.indexOf(obj[i].tagName + ";") >= 0) {
                    /* Get the number of the multilevel list in accordance with the current title */
                    var lvl = getNumberLevel(obj[i].tagName);
                    /* HTML template */
                    str += "<li class='" + getClassLvl(obj[i].tagName) + "'><a href='#title-" + i + "'>" + lvl + " " + obj[i].innerHTML + "</a></li>";
                    obj[i].id = "title-" + i;
                }
            }
            return str;
        }

        /**
         * Get CSS class in accordance with the title level
         */
        function getClassLvl(_tagName) {
            if (_tagName === "H2") {
                return "class-toc-h2";
            } else if (_tagName === "H3") {
                return "class-toc-h3";
            } else if (_tagName === "H4") {
                return "class-toc-h4";
            }
        }

        /**
         * Multilevel list generator
         */
        function getNumberLevel(_tagName) {
            if (_tagName === "H2") {
                countH3 = countH4 = 0;
                return ++countH2;
            } else if (_tagName === "H3") {
                countH4 = 0; /* Reset next level number */
                return countH2 + "." + ++countH3;
            } else if (_tagName === "H4") {
                return countH2 + "." + countH3 + "." + ++countH4;
            }
        }
    }
    /* Register TOC function after SP page is loaded */
    _spBodyOnLoadFunctionNames.push("buildToc");
</script>