Posted by pmorch on
URL: https://discuss.asciidoctor.org/Is-there-a-way-to-autoscroll-the-toc-from-the-content-in-HTML-tp4525p7339.html

Hi,

I needed this too and this works. It actually does two things:

* It highlights the "current" chapter / heading in the TOC with gumshoe.

* A listener to a gumshoe event causes the TOC to scroll, so the current entry is at the middle of the TOC height-wise. That works for us.

What is missing is if a user starts the page at file.html#_some_section, then the TOC is only updated when the user starts navigating. Perhaps if I fix that too, I'll update below.

I put this in my file.adoc:

:docinfo: shared-head

and put this in docinfo.html:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/gumshoe@5/dist/gumshoe.polyfills.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.js"></script>
<script>
    jQuery(function () {
        var scrollspy = new Gumshoe('#toc li > a', {
            nested: false
        });
        document.addEventListener('gumshoeActivate', function (event) {
                jQuery('#toc')
                    .stop()
                    .scrollTo(event.detail.link, 500, {
                        offset: {
                            top:  0 - jQuery('#toc').height() / 2,
                            left: 0,
                        }
                    });
        }, false);
    });
</script>

<style>
    #toc li.active > a {
        font-weight: bold;
        text-decoration: underline;
        font-style: italic;
    }

    #toc li a {
        display: inline-block;
    }
</style>