TOC

TOP

TOC from HTML H[1-6]
- /js/header2toc.js
- in HTML.HEAD

TOC from HTML H[1-6]

/js/header2toc.js

on_toc_click=function(i){
	//alert(i.id);
	var hh  = document.querySelectorAll("h1, h2, h3, h4, h5, h6")
	var index=parseInt(i.id.substring(3));
	var h=hh[index];
	h.scrollIntoView(true);
	return false;
}
header2toc=function(){
	//var hh  = document.getElementsByTagName("h1");
	var hh  = document.querySelectorAll("h1, h2, h3, h4, h5, h6")

	var toc = document.createElement('p');
	var ul = document.createElement('ul');

	var ie = (toc.innerText !== undefined);

	if(ie)toc.innerHTML="--- TOC ---";
	else toc.textContent="--- TOC ---";

	var h1=h2=h3=h4=h5=h6=0;
	var prev="";
	var index="";
	for( var i=0; i< hh.length; i++){
		if(hh[i].tagName=="H1"){
			h1++;
			index=h1.toString();
			h2=h3=h4=h5=h6=0;
		} else if(hh[i].tagName=="H2") { 
			h2++;
			h3=h4=h5=h6=0;
			index=h1.toString()+"."+h2.toString();
		} else if(hh[i].tagName=="H3") {
			h3++;
			h4=h5=h6=0;
			index=h1.toString()+"."+h2.toString()+"."+h3.toString();
		} else if(hh[i].tagName=="H4") {
			h4++;
			h5=h6=0;
			index=h1.toString()+"."+h2.toString()+"."+h3.toString()+h4.toString();
		} else if(hh[i].tagName=="H5") {
			h5++;
			h6=0;
			index=h1.toString()+"."+h2.toString()+"."+h3.toString()+h4.toString()+"."+h5.toString();
		} else if(hh[i].tagName=="H6") {
			h6++;
			index=h1.toString()+"."+h2.toString()+"."+h3.toString()+h4.toString()+"."+h5.toString()+"."+h6.toString();
		} else {
			continue;
		}
		index+="  ";
		var li = document.createElement('li');
		var a = document.createElement('a');
		a.href="javascript:void(0)";
		a.onclick=function(){on_toc_click(this);};
		a.id="toc"+i;
		if(ie){
			a.innerText = index+hh[i].innerText;
		} else{
			a.textContent = index+hh[i].textContent;
		}
		li.appendChild(a);
		ul.appendChild(li);
	}
	toc.appendChild(ul);
	window.document.body.insertBefore(toc, window.document.body.firstChild);
	//alert(toc.outerHTML);
}
document.addEventListener("DOMContentLoaded", function(event) {
		//console.log("DOM fully loaded and parsed");
	header2toc();
});

in HTML.HEAD

<html>
   <head>
   :
   <script type="text/javascript" src="/js/header2toc.js"></script>
   </head>
   <body>
      <h1> Brabra </h1>
      :
   </body>
</html>