folio/public/assets/js/toc.js

(function () {
    var headings = document.querySelectorAll('.post-content h2, .post-content h3');
    var links    = document.querySelectorAll('.toc-list a');

    if (headings.length && links.length) {
        var map = {};
        links.forEach(function (a) {
            map[decodeURIComponent(a.getAttribute('href').slice(1))] = a;
        });

        var active = null;
        var observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    if (active) active.classList.remove('toc-active');
                    active = map[entry.target.id] || null;
                    if (active) active.classList.add('toc-active');
                }
            });
        }, { rootMargin: '-8% 0px -82% 0px', threshold: 0 });

        headings.forEach(function (h) { observer.observe(h); });
    }

    var btnTop = document.getElementById('toc-go-top');
    var btnBot = document.getElementById('toc-go-bottom');
    if (btnTop) {
        btnTop.addEventListener('click', function () {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }
    if (btnBot) {
        btnBot.addEventListener('click', function () {
            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
        });
    }
})();