I am in the process of creating an online book that will consist of multiple chapters. In each chapter, I want to include a sidebar with scroll-navigation that automatically links to every h2 heading within that specific chapter.
I have experimented with the scrollnav plugin, but encountered an issue where it generated incorrect links as it was not designed to work with multiple sections (linking to previous sections instead).
Does anyone have a better solution for implementing this feature?
Note: The ebook will be quite lengthy, with around 13-15 chapters and 10-12 subchapters in each. Therefore, having an autogenerated id for the h2 headings (or an alternative solution) would be ideal :-)
The HTML structure is as follows:
<section id="1">
<h2>Sub-chapter 1</h2>
<h2>Sub-chapter 2</h2>
<h2>Sub-chapter 3</h2>
</section>
<section id="2">
<h2>Sub-chapter 1</h2>
<h2>Sub-chapter 2</h2>
<h2>Sub-chapter 3</h2>
</section>
<section id="3">
<h2>Sub-chapter 1</h2>
<h2>Sub-chapter 2</h2>
<h2>Sub-chapter 3</h2>
</section>
Additionally, I should mention that I am still relatively new to working with JavaScript.