Tocify是一個能夠動態生成文章節點目錄的jQuery插件。假如我們有一篇很長的文章，文章有多個節點，那么使用Tocify可以根據節點元素動態生成文章目錄，點擊目錄可以平滑滾動到對應的節點，當然當滾動頁面時，目錄結構會根據當前監聽到的節點進行切換到當前目錄狀態。

效果展示         源碼下載

Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller兩種主題風格，我們可以根據實際項目任選其中一種風格，另外必要條件jQuery 1.7.2+和jQueryUI Widget Factory 1.8.21+。放心在IE7+即現代瀏覽器上使用。

引入CSS和Javascript文件

css文件

<link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> <link type="text/css" rel="stylesheet" href="bootstrap.css" /> 

JavaScript文件

<script src="jquery-1.7.2.min.js"></script> <script src="jquery-ui-1.9.1.custom.min.js"></script> <script src="jquery.tocify.min.js""></script> 

HTML結構

創建一個DIV標簽，然后給這個標簽添加一個ID或者Class，例如：toc

<div id="toc"></div>

這個div#toc它默認是空的內容，它用來動態生成文章目錄，那文章目錄如何動態關聯文章節點的呢？我們還需要把文章節點做一些規劃，如：

<div class="wrap"> <h1>Tocify</h1> <br /> <section> <h2>節點1</h2> <p>內容</p> </section> <br /> <section> <h2>節點2</h2> <p>內容</p> </section> ... </div>

以上的HTML結構代碼大家可以修改tocify的CSS文件來滿足你項目視覺的需求。

Javascript

使用jQuery選擇選中我們的toc元素，然后通過tocify()方法調用Tocify插件。

$(function() { $("#toc").tocify(); });

如此，運行網頁，一個動態的文章目錄就生成了。

選項設置

Tocify提供了豐富的選項設置，我們可以根據項目實際需求設置不同的選項參數。以下是主要的幾個參數選項介紹：