html文章目录怎么生成,前端那点事情——Tocify自动生成文档目录

前端那点事儿——Tocify自动生成文档目录

今天偶然间看到文档服务器有一个动态目录功能，点击目录能跳转到指定的位置；窗口滑动也能自动更新目录的焦点。

效果

框架

原来使用的是一个开源的jquery-ui控件——tocify.js，它可以遍历页面，把指定的DOM元素抽取出来形成目录。

下载地址参考gitub : [gfranko/jquery.tocify.js]

开发者可以直接下载zip包使用，压缩包里面的内容包括：

demos 演示页面(里面有一个google的链接，访问会超时，去掉即可)

images 可以忽略

libs 额外使用的文件，如jquery,jquery-ui,bootstrap等等

src 源文件(包括js以及css)——重点

test 忽略

其他忽略

举个栗子

}p{font-size:16px;

}.headerDoc{color:#005580;

}@media (max-width: 767px){#toc {

position:relative;width:100%;margin:0px 0px 20px 0px;

}}