参考文档
- JQuery 实现自动生成二级目录
- JQuery 点击事件回到页面顶部效果
配置步骤
- content 内容的标题要固定某个号，如：h2
- 设置 content 内容 div 的 id 属性，如：id="yzq-blog-content"
- 实现的 js 代码
只生成一级目录，指定 h2（效果）：
代码语言：javascript复制<script language="javascript" type="text/javascript">
//生成一级目录索引列表
function GenerateContentList() {
var jquery_h3_list = $('#yzq-blog-content h2');// 这里的 h2, 换成内容页面对应的标题号数 (h1 h2 h3)
if (jquery_h3_list.length > 0) {
var content = '<a name="_labelTop"></a>';
content = '<div id="navCategory">';
content = '<p style="font-size:18px"><b>阅读目录</b><small>（点击目录名回目录）</small></p>';
content = '<ol>';
for (var i = 0; i < jquery_h3_list.length; i ) {
var go_to_top = '<div style="" class="return-list"><a href="#top"></a><a name="_label' i '"></a></div>';
$(jquery_h3_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' i '">' $(jquery_h3_list[i]).text() '</a></li>';
content = li_content;
}
content = '</ol>';
content = '</div>';
if ($('#yzq-blog-content').length != 0) {
$($('#yzq-blog-content')[0]).prepend(content);
}
}
}
GenerateContentList();
$("h2").click(function (event) {
if (event.target === this) {
// 点击 h2 标题，回到顶部，时间是回去的动画时长
$("html,body").animate({scrollTop: 0}, 400);
}
});
</script>从 h2 到 h3 生成目录代码：
代码语言：javascript复制<script language="javascript" type="text/javascript">
//生成一级目录索引列表
function GenerateContentList() {
var jquery_h3_list = $('#yzq-blog-content h2');// 这里的 h2, 换成内容页面对应的标题号数 (h1 h2 h3)
if (jquery_h3_list.length > 0) {
var content = '<a name="_labelTop"></a>';
content = '<div id="navCategory">';
content = '<p style="font-size:19px"><b>阅读目录</b><small>（点击目录名回目录）</small></p>';
content = '<ul>';
for (var i = 0; i < jquery_h3_list.length; i ) {
var go_to_top = '<div style="" class="return-list"><a href="#top"></a><a name="_label' i '"></a></div>';
$(jquery_h3_list[i]).before(go_to_top);
{# var li_content = '<li><a href="#_label' i '">' $(jquery_h3_list[i]).text() '</a></li>';#}
var li_content = '<a href="#_label' i '"><li>' $(jquery_h3_list[i]).text() '</li></a>';
// h3 生成目录
var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i 1], "h3");
if (jquery_h4_list.length > 0) {
li_content = '<ul style="list-style-type:none;text-align:left;margin:2px 0;padding:2px 2px;">';
}
for (var j = 0; j < jquery_h4_list.length; j ) {
var go_to_top2 = '<div style="text-align: right;" ><a name="_lab2' i j '"></a></div>';
$(jquery_h4_list[j]).before(go_to_top2);
li_content = '<a href="#_lab2' i j '"><li>' $(jquery_h4_list[j]).text() '</li></a>';
}
if (jquery_h4_list.length > 0) {
li_content = '</ul>';
}
li_content = '</li>';
// h3 生成目录
content = li_content;
}
content = '</ul>';
content = '</div>';
if ($('#yzq-blog-content').length != 0) {
$($('#yzq-blog-content')[0]).prepend(content);
}
}
}
GenerateContentList();
$("h2").click(function (event) {
if (event.target === this) {
// 点击 h2 标题，回到顶部，时间是回去的动画时长
$("html,body").animate({scrollTop: 0}, 400);
}
});
$("h3").click(function (event) {
if (event.target === this) {
// 点击 h3 标题，回到顶部，时间是回去的动画时长
$("html,body").animate({scrollTop: 0}, 400);
}
});
</script>content 的代码：
代码语言：javascript复制<div class="am-article-bd yzq-article-bd" id="yzq-blog-content">
{{ article.content | safe }}
</div>
