This kind of thing has been done many times and many ways. But this time is ours! Plus it makes for a good tutorial.
HTML: Headers and IDs
A long page of different parts you wish to link to could be marked up a bunch of ways. Perhaps a FAQ page could be a <dl>. It could literally be <section> after<section>. In our case, we’ll assume this structure:
<article><h3id="question-one">Title of Question</h3><!-- whatever other content, probably some paragraphs and stuff. --><h3id="question-two">Another Question</h3><!-- whatever other content, probably some paragraphs and stuff. --><!-- etc --></article>
A perfectly legit page full of headers with IDs and the content between them. Note the ID’s. They are unique, as any good ID ought to be. This is required because it gives us a link target.
A link like this:
<ahref="#question-one">Link to Question One</a>
Will jump down the page when clicked until the element with the ID “question-one” is in view.
Building the Table of Contents with jQuery
Our goal is to inject HTML on the page in the form of a table of contents. Like this:
<navrole="navigation"class="table-of-contents"><h2>On this page:</h2><ul><li><ahref="#question-one">Question One</a></li></ul></nav>