如何高效构建长尾词文章目录导航系统？

本文共计1400个文字，预计阅读时间需要6分钟。

TOC，即目录，是文档中用于展示章节和页码的部分。它的主要作用是：

1. 方便查找：读者可以通过目录快速定位到感兴趣的章节。

2.结构清晰：使文档结构更加清晰，便于阅读和理解。

以下是一个简单的hexo博客中实现TOC的示例：

子1 子2

这段代码通过获取页面中的所有`h2`，并为每个创建一个锚点链接，然后将这些链接添加到一个目录容器中，最后将目录容器添加到页面底部。

关于滚动效果，可以使用以下方式实现：

这段代码监听目录项的点击事件，当点击目录项时，计算目标元素距离顶部的距离，并使用`window.scrollTo`方法平滑滚动到该位置。

什么叫TOC呢？table of content。

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

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

点目录跳到段落：通过<a>标签的锚点实现，其原理在这里。
滚动触发目录变换：通过js监听滚动事件，判定当前所处段落，令对应目录项高亮。
我写了一个简单的demo来演示这个效果，

源码地址：github.com/owenliang/js-toc

在线体验：owenliang.github.io/js-toc

实现分析

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