This kind of thing has been done many times and many ways. But this time is ours! Plus it makes for a good tutorial.<\/p>\n 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 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. <\/p>\n A link like this:<\/p>\n Will jump down the page when clicked until the element with the ID “question-one” is in view.<\/p>\n Our goal is to inject HTML on the page in the form of a table of contents. Like this:<\/p>\n A list in that We’ll build this entirely dynamically. Perhaps it would be smart to use some kind of JavaScript templating for this. But hey, this is so simple, let’s just build a big string and append that.<\/p>\n We’re leaving several tags open there, we’ll close them before we are done.<\/p>\n The We need 1) the text of each header, which we will turn into a link and 2) the ID of each header which we can turn into a Inside of that loop, “this” refers to the header element currently targeted, so to speak. we set “el” to a jQuery version of it, so we can use jQuery methods on it to extract that text and ID.<\/p>\n The “+=” there means “append this new string to the already existing string stored in this variable.<\/p>\n Now you’ll need to decide just exactly where you want this newly formed table to contents to be injected onto the page. Putting at the top of the page is probably smart. <\/p>\n Our example uses In “real life”, perhaps you’d target a header and use insertAfter<\/a> or another of jQuery’s fancy DOM insertion methods.<\/p>\n For a bit of extra flair in the demo, I used the :target<\/a> selector to highlight the title of the question when you jump down the page to it. Just gets the eye there even quicker. Like from this tutorial<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":" Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":336397,"url":"https:\/\/css-tricks.com\/table-of-contents-with-intersectionobserver\/","url_meta":{"origin":20678,"position":0},"title":"Table of Contents with IntersectionObserver","date":"March 11, 2021","format":false,"excerpt":"If you have a table of contents on a long-scrolling page, thanks to, say, position: fixed; or position: sticky;, the IntersectionObserver API in JavaScript is the perfect companion to highlight items in the table of contents when corresponding content is in view. Ben Frain has a post all about this:\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/ben-frain-intersectionobserver-toc.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302002,"url":"https:\/\/css-tricks.com\/sticky-table-of-contents-with-scrolling-active-states\/","url_meta":{"origin":20678,"position":1},"title":"Sticky Table of Contents with Scrolling Active States","date":"January 30, 2020","format":false,"excerpt":"Say you have a two-column layout: a main column with content and a sidebar. Say it has a lot of content, with sections that requires scrolling. The sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":360362,"url":"https:\/\/css-tricks.com\/table-of-contents-block-in-wordpress\/","url_meta":{"origin":20678,"position":2},"title":"4 Quality Options for a Table of Contents Block in WordPress","date":"January 18, 2022","format":false,"excerpt":"There are a number of options for including a Table of Contents lock in WordPress. You can use a plugin, or try to do it yourself.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/wp-toc-pattern-logo.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365888,"url":"https:\/\/css-tricks.com\/a-perfect-table-of-contents-with-html-css\/","url_meta":{"origin":20678,"position":3},"title":"A Perfect Table of Contents With HTML + CSS","date":"May 25, 2022","format":false,"excerpt":"Earlier this year, I self-published an ebook called Understanding JavaScript Promises (free for download). Even though I didn't have any intention of turning it into a print book, enough people reached out inquiring about a print version that I decided to self-publish that as well .I thought it would be\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/toc-photo-scaled.jpg?fit=1200%2C812&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338429,"url":"https:\/\/css-tricks.com\/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders\/","url_meta":{"origin":20678,"position":4},"title":"Platform News: Using :focus-visible, BBC’s New Typeface, Declarative Shadow DOMs, A11Y and Placeholders","date":"April 16, 2021","format":false,"excerpt":"There's a whole lot of accessibility in this week's news, from the nuances of using :focus-visible and input placeholders, to accessible typefaces and a Safari bug with :display: contents. Plus, a snippet for a bare-bones web component that supports style encapsulation. Now may be a good time to start using\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/wpn-20210416.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325013,"url":"https:\/\/css-tricks.com\/parsing-markdown-into-an-automated-table-of-contents\/","url_meta":{"origin":20678,"position":5},"title":"Parsing Markdown into an Automated Table of Contents","date":"November 13, 2020","format":false,"excerpt":"A table of contents is a list of links that allows you to quickly jump to specific sections of content on the same page. It benefits long-form content because it shows the user a handy overview of what content there is with a convenient way to get there. This tutorial\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/smooth-scroll-nav.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20678"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=20678"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20678\/revisions"}],"predecessor-version":[{"id":20695,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20678\/revisions\/20695"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=20678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=20678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=20678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
HTML: Headers and IDs<\/h3>\n
<dl><\/code>. It could literally be <section><\/code> after <section><\/code>. In our case, we’ll assume this structure:<\/p>\n<article>\r\n\r\n <h3 id=\"question-one\">Title of Question<\/h3>\r\n <!-- whatever other content, probably some paragraphs and stuff. -->\r\n\r\n <h3 id=\"question-two\">Another Question<\/h3>\r\n <!-- whatever other content, probably some paragraphs and stuff. -->\r\n\r\n <!-- etc -->\r\n\r\n<\/article><\/code><\/pre>\n<a href=\"#question-one\">Link to Question One<\/a><\/code><\/pre>\nBuilding the Table of Contents with jQuery<\/h3>\n
<nav role=\"navigation\" class=\"table-of-contents\">\r\n <h2>On this page:<\/h2>\r\n <ul>\r\n <li><a href=\"#question-one\">Question One<\/a><\/li>\r\n <\/ul>\r\n<\/nav><\/code><\/pre>\n<nav><\/code>? Yep.<\/a><\/p>\nStep 1: A string of HTML<\/h4>\n
var ToC =\r\n \"<nav role='navigation' class='table-of-contents'>\" +\r\n \"<h2>On this page:<\/h2>\" +\r\n \"<ul>\";<\/code><\/pre>\nStep 2: Loop through the headers<\/h4>\n
<h3><\/code>‘s on our page indicate each section we wish to link to, so we’ll find them all with a jQuery selector, then loop through each of them.<\/p>\n$(\"article h3\").each(function() {\r\n\r\n \/\/ loop\r\n\r\n});<\/code><\/pre>\nStep 3: Get the bits of data we need<\/h4>\n
href<\/code> attribute for that link.<\/p>\nvar el, title, link;\r\n\r\n$(\"article h3\").each(function() {\r\n\r\n el = $(this);\r\n title = el.text();\r\n link = \"#\" + el.attr(\"id\");\r\n\r\n});<\/code><\/pre>\nStep 4: Create a new list item and append to string<\/h4>\n
var newLine, el, title, link;\r\n\r\n$(\"article h3\").each(function() {\r\n\r\n el = $(this);\r\n title = el.text();\r\n link = \"#\" + el.attr(\"id\");\r\n\r\n newLine =\r\n \"<li>\" +\r\n \"<a href='\" + link + \"'>\" +\r\n title +\r\n \"<\/a>\" +\r\n \"<\/li>\";\r\n\r\n ToC += newLine;\r\n\r\n});<\/code><\/pre>\nStep 5: Close the “template”<\/h4>\n
ToC +=\r\n \"<\/ul>\" +\r\n \"<\/nav>\";<\/code><\/pre>\nStep 6: Inject HTML onto page<\/h4>\n
<article><\/code> to wrap everything, so to inject at the top of that, we would do:<\/p>\n$(\"article\").prepend(ToC);<\/code><\/pre>\nDemo<\/h3>\n
<\/code>Table of Contents demo on CodePen<\/a><\/pre>\n