给网页添加章节导航栏

bookmarklet 导航栏.js

javascript: (function() {
    NodeList.prototype.forEach = Array.prototype.forEach;
    var navId = 'shellexy_html5nav_bar';
    if (nav = document.getElementById(navId)) {
        document.body.style.marginLeft = document.body.getAttribute('marginLeft');
        return nav.parentElement.removeChild(nav);
    }
    if (!document.styleSheets.length) {
        document.body.appendChild(document.createElement('style'));
    }
    document.styleSheets[0].insertRule('#' + navId + '::-webkit-scrollbar {width: 4px; height: 4px;}', 0);
    document.styleSheets[0].insertRule('#' + navId + '::-webkit-scrollbar-thumb {background-color: #e76829}', 0);
    var nav = document.getElementById(navId);
    if (nav) {
        document.body.removeChild(nav);
        nav = false;
    }
    if (!nav) {
        var nav = document.createElement('div');
        nav.id = navId;
        nav.style.cssText = 'position: fixed; box-sizing: border-box; top: 0px; left: 0px; width: 198px; height: 100%; margin: 0px; padding-top: 30px; overflow: scroll; outline: 0px solid #333333;';
        document.body.setAttribute('marginLeft', document.body.style.marginLeft);
        document.body.style.marginLeft = '200px';
        document.body.appendChild(nav);
    }
    document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(function(head) {
        var a = document.createElement('a');
        a.style.cssText = 'display: block; padding: 2px; width: 100%; text-align: left;';
        var level = parseInt(head.tagName.slice(1));
        a.style.paddingLeft = level - 0.5 + 'em';
        a.style.fontSize = 11 - level + 'pt';
        a.href = '#';
        a.innerText = head.innerText + level;
        a.onclick = function() {
            head.scrollIntoView();
            return false;
        };
        nav.appendChild(a);
    });
})();
void(0);