Javascript 在多个部分中滚动导航到h2

我打算开发一种在线图书。 在每个章节的特定id部分，我想添加一个自动生成的侧栏，滚动导航到该特定章节中的每个h2。 当然，侧边栏应该在包含该部分中各个h2的每个部分中生成，并链接到它们

我试过这个。事实上，它是可以工作的，但问题是它不能生成正确的链接，因为它不能在第2节中处理多个节，它实际上链接到第1节，以此类推

谁有更好的解决方案

Obs：这是一本龙电子书，有13-15章，每章有10-12个子章。因此，首选h2或其他解决方案的自动生成id：-

HTML：

<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>

也许我应该说：我对javascript还是新手

// Document ready
jQuery(document).ready(function(){
    jQuery('section').each(function(){
        var html = '<ul>';
        var id = jQuery(this).attr('id');
        var i = 1;
        jQuery(this).children('h2').each(function(){
            jQuery(this).attr('id', id + '-' + i);
            html += '<li><a href="#' + jQuery(this).attr('id') + '">' + jQuery(this).text() + '</a></li>';
            i++;
        });
        html += '</ul>';
        jQuery(this).prepend(html);
    });
});

---

这只是一个建议，但是为什么你不开始使用常规的旧id定位呢？i、 没有什么特别的过渡，但是浏览器会很好的滚动。因为我必须给每个h2一个ID，这是一本很长的在线书，有13-15章！每个章节有10-12个子章节。此外，我希望能够在侧边栏上突出显示当前的h2。是的，我可以这样做，但我们讨论的是13-15章，每章有10-12个子章。因此，h2或其他解决方案的自动生成id将是首选：-实际上就像我链接到的scrollnav插件一样，只有正确的目标url。同样，在不使用侧边栏中的链接向下滚动页面时，是否可以根据您在站点上的位置向侧边栏中的当前子章添加类？