Auto-generated Quick Links

Hello,

We had a customer post this question

“Looking for something that can build a Quick Links list from H2’s in a page. Does anybody have any examples of doing this?”

Basically, we are looking for a code snippet that can:

  • find all h2 headers on a page
  • create anchors for all of them
  • add them to a quick links section at the top of the page

Thanks,

Romario Mato
Customer Success Engineer

Hi. We’ve done something just like this before - and it was much simpler to do it on the front end using javascript (jQuery).

Here is an example of some code that looks for any H2 tags within a section called “main” and for each H2 it finds it builds up a list which is added to a section of the page identified by “sidebar”.

https://jsfiddle.net/davidrowe/yvjtoLxf/1/ - if you edit one of the H2 titles in the HTML (and the click run at the top) the page links section will update automatically with the updated title.

Sorry it’s not a velocity solution but it does pretty much what you’re asking about!

David