In your main-article.liquid file (in Dawn, not sure on other themes), above the schema section add this code .. it will transform all H2 links into a TOC item, and insert the entire TOC above the first H2.
##########################################
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get all 'h2' tags inside '.article-template'
const h2Tags = document.querySelectorAll('article h2');
// Create a contents container
const contentsContainer = document.createElement('div');
contentsContainer.id = 'contents-container';
// Create a heading for the contents table
const contentsHeading = document.createElement('h3');
contentsHeading.textContent = 'Table of Contents';
// Create an unordered list for the contents
const contentsList = document.createElement('ul');
contentsList.id = 'contents';
// Append heading and list to the contents container
contentsContainer.appendChild(contentsHeading);
contentsContainer.appendChild(contentsList);
// Insert the contents container before the first 'h2' tag
const firstH2 = h2Tags[0];
firstH2.parentNode.insertBefore(contentsContainer, firstH2);
// Loop through each 'h2' tag
h2Tags.forEach((h2, index) => {
// Assign ids to 'h2' tags
h2.id = (index + 1).toString();
// Create a list item for the contents table
const listItem = document.createElement('li');
// Create an anchor tag with a link to the corresponding 'h2' tag
const anchor = document.createElement('a');
anchor.href = `#${h2.id}`;
anchor.textContent = h2.textContent;
// Append the anchor tag to the list item
listItem.appendChild(anchor);
// Append the list item to the contents table
contentsList.appendChild(listItem);
});
});
</script>
<style>
#contents-container {
background: #F3F9FF;
padding: 15px 15px 15px 15px;
border-radius: 5px;
}
#contents-container a {
font-size: 16px;
line-height: 1;
}
#contents-container h3 {
margin: 0;
margin-bottom: 10px;
}
#contents-container ul {
padding: 0;
margin: 0;
padding-left: 15px;
}
#contents-container li {
list-style: disclosure-closed;
}
html {
scroll-behavior: smooth;
}
</style>
