在前端开发中,我们常常需要实现类似于文章目录的功能来帮助用户快速定位到所需内容。而 jquery.tocify
是一个可轻松实现这一功能的 npm 包。
安装
使用 npm 进行安装:
npm install jquery.tocify
初始化
在页面引入 jquery
和 jquery.tocify
后,可以通过以下代码进行初始化:
$(document).ready(function() { $("#toc").tocify({ selectors: "h1, h2, h3", theme: "bootstrap", extendPage: false, highlightOffset: 60 }); });
其中,#toc
是要渲染目录的 DOM 元素的 ID,selectors
是指定哪些标签将被用于生成目录,theme
是指定目录的样式主题,extendPage
控制目录是否会超出页面边界而自动滚动,highlightOffset
可以添加高亮偏移量。
示例
下面是一个完整示例代码:
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------- ------------ ----- ---------------- -------------------------------------------------------------------------------------- ------- ----------------------------------------------------- ------- ----------------------------------------------------------------------------------------- ------- ------ ---- ------------------ ---- ------------ ---- ----------------- ----------------- --------- --------------- ----------- ----- --- --------- -------------- ------- -------------------------- ------------ ------------------- --------------------------------------- - ------------------ ---------- ---- --- ---- ------ ------------ ----------- ------ ---------------- -- --- ---------------- ----------- -------------------- ----------------------- -------- ------------ ------------ -------------------------- ------------------ -------- ---------------- ----------------------------------------------------------------------------------------- ---------- -------------------------------------------------------------- ---------- -------------------------------------------------------------------------------------------------- ------------- ------------ ------- --------------------- ------- --------------- ------- -------------------- ----------------------- --------------- --------------------------- ----------------------- ----------- --- --------------- -------------------------- ------- -------------------------------------- ------------------------ ------------------------------- --------------------------------------------------- - ------------------ ---------- ---- --- ---- ------ ------------ ----------- ------ ---------------- -- --- ---------------------------- ----- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------