Create a Table of Contents automatically

Do you have any updated code for this? I only found one from this article and some things seem to be outdated. Thank you!https://support.zendesk.com/hc/en-us/community/posts/4408867942298-Tip-How-to-make-a-Table-Of-Contents-TOC-For-Article-Template 

This thread has been super helpful, so thanks everyone who has contributed.

Like 405905032713, I'm also wanting to add a title to the TOC - Is someone able to point us in the right direction?

Wow thanks 414774449873 that works really well.

I have my TOC working with nested bullet points for each heading level. Two things I'm curious if anyone knows:

• how to edit the code so my TOC only displays all the <h2> from the article and not the rest of the headings.
• how to add a title like 'Table of Contents' to appear above the TOC by default.

Thank you.

454757487 I wish I could share our community link but it's a private comm 😞

I do have some good news though... I found some script that adjusts the top of the viewport for anchor links, and it's working marvelously. I did adjust the "100" to "80" and it's perfect for us. Here's the js snippet:

// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

Source: https://stackoverflow.com/a/17535094/6084758

btw 405905032713 ⬆︎  that should help you! Also, I'm not seeing 1.1 or 1.11, etc. we see an "unordered list" in our community. I wonder if you're seeing numbers as a result of custom styling in your community?

Experiencing the same issue as Jordan with the viewport being below the linked heading.

I'm also wondering what part of the code creates the numbering (1, 1.1, 1.1.1). I'd like to remove the numbering but keep everything else as is.

Hey Jordan, regarding this issue "but the viewport of the screen is about 30 pixels below the actual header." - it could be fixed with pure CSS (padding-top and negative margin-top).

It's really hard to tell from this point why the TOC doesn't work from the 1st visit of the page; maybe it would help if you can share your HC URL so I can take a closer look. Thanks!

In addition to my last question (previous post) I am just now noticing that the table of contents does not render/display when I visit a page. However, when I press the "refresh" button on that page, the TOC then appears. Any idea what I could change, in the code, to make the TOC render immediately, the first time the page loads? 454757487?

in response to 454757487's post here: https://support.zendesk.com/hc/en-us/community/posts/213641488/comments/360001878568

This was the only code snippet I could get to work for our instance of ZenDesk. Thank you for that!

Now I've noticed that when we click one of the links in the TOC it takes us to the respective heading, but the viewport of the screen is about 30 pixels below the actual header.  (see the GIF below). 

20980975327 posted a link to her Guides here and as I looked at the Enalyzer TOC it works perfectly... taking you right to the respective header... placing it perfectly at the top of the screen viewport. 

What modifications could I add to the code below, to adjust the script to make the anchor have the header appear at the top of the viewport?

Hey Ami, yes that is the case. I suggest not wrapping the H2s in divs. If you need to add divs within content, just add it around the <p>s inside the H2/H3s

This solution works in most ZD environments, but if you have a very customized theme it may not.

I've noticed that this code breaks if I wrap the H2 with a div or section.  The toc only shows the first H2 but none of the subsequent H2s. Has anyone else experienced this?