Is there a way to autoscroll the toc from the content in HTML

Hi,

I have a rather large document and I'd like to provide links to some sections.

To ease life of readers, I'd like to see the TOC scrolled to the matching section (from fragment id in URL), so he can see the related topics in the document and how they are related.

Is there any solution or plan to add this feature?

Thanks

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>

I wrote

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 was a little fast there. It does actually work out-of-the-box. I just assumed it didn't work because I didn't do anything to make it work. But gumshoe is apparently smart enough that it just works... :-)

pmorch wrote

I put this in my file.adoc:

:docinfo: shared-head

and put this in docinfo.html:

docinfo.html can be in the same folder with file.adoc.

Docinfo Files for reference