什么叫TOC呢？table of content。
具体什么效果呢？可以随便找个hexo博客中体验一下，例如这个。
好了，实现它有2个要点：
点目录跳到段落：通过<a>标签的锚点实现，其原理在这里。
滚动触发目录变换：通过js监听滚动事件，判定当前所处段落，令对应目录项高亮。
我写了一个简单的demo来演示这个效果，
源码地址：https://github.com/owenliang/js-toc
在线体验：http://owenliang.github.io/js-toc
实现分析
#toc是左侧的目录，#content是右侧的文章正文。
<div id="toc"> <ul> </ul> </div> <div id="content"> <a name="seg-1" class="seg-begin"><h1>第1章节</h1></a> <div class="seg-content"></div> <a name="seg-2" class="seg-begin"><h1>第2章节</h1></a> <div class="seg-content"></div> <a name="seg-3" class="seg-begin"><h1>第3章节</h1></a> <div class="seg-content"></div> <a name="seg-4" class="seg-begin"><h1>第4章节</h1></a> <div class="seg-content"></div> </div>
利用css控制#toc靠左，当前目录高亮为红色，正文则靠右填满屏幕：
#toc {
width: 200px;
position: fixed;
left: 0;
top: 0;
}
#toc a.active {
color: red;
}
#content {
margin-left: 200px;
}
在上面的静态页面中，目录暂时为空，因为需要用JS动态生成。
正文中需要人工埋点段落起始标识，也就是a.seg-begin这样的锚点，每个段落的锚点name唯一，而锚点之后紧随段落的内容。
在JS中，我首先按锚点的出现次序收集所有的a.seg-begin保存到segs数组中，其顺序就是文章自上而下的阅读顺序，按照其<h1>中的段落标题建出#toc中的<ul>列表：
var segs = [];
$(".seg-begin").each(function (idx, node) {
segs.push(node)
var link = $("<a></a>").attr("href", "#" + $(node).attr("name")).html($(node).children("h1").html())
if (!idx) {
link.addClass("active")
}
var row = $("<li></li>").append(link)
$("#toc ul").append(row)
})
然后绑定浏览器的scroll事件进行监听，每次滚动就判断最近一个滚出屏幕顶部的a.seg-begin节点，它就是当前正在阅读的段落：
$(window).bind("scroll", function() {
var scrollTop = $(this).scrollTop()
var topSeg = null
for (var idx in segs) {
var seg = segs[idx]
if (seg.offsetTop > scrollTop) {
continue
}
if (!topSeg) {
topSeg = seg
} else if (seg.offsetTop >= topSeg.offsetTop) {
topSeg = seg
}
}
if (topSeg) {
$("#toc a").removeClass("active")
var link = "#" + $(topSeg).attr("name")
console.log('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ]')
$('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ]').addClass("active")
// console.log($(topSeg).children("h1").text())
}
})
后续
这里目录的生成是在前端JS里根据正文的锚点动态生成的，为了SEO可以在后端提交文章正文时匹配出这些锚点，直接保存为目录。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
word-break: break-all;
}
#toc {
width: 200px;
position: fixed;
left: 0;
top: 0;
}
#toc a.active {
color: red;
}
#content {
margin-left: 200px;
}
</style>
<script src="/UploadFiles/2021-04-02/jquery.min.js">
另外，这里没有实现嵌套的目录结构，我特意观察了一下hexo的做法，是通过h1,h2,h3来表达层级的，这样在each遍历生成目录的时候可以基于这个信息完成嵌套层级的标记，问题迎刃而解。
文章目录,文章索引,文章导航
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。