纯html js目录索引,js实现文章目录索引导航(table of content)

什么叫TOC呢？table of content。

具体什么效果呢？可以随便找个hexo博客中体验一下，例如这个。

好了，实现它有2个要点：

点目录跳到段落：通过标签的锚点实现，其原理在这里。

滚动触发目录变换：通过js监听滚动事件，判定当前所处段落，令对应目录项高亮。

我写了一个简单的demo来演示这个效果，

实现分析

#toc是左侧的目录，#content是右侧的文章正文。

第1章节

第2章节

第3章节

第4章节

利用css控制#toc靠左，当前目录高亮为红色，正文则靠右填满屏幕：

#toc {

width: 200px;