如下所示:

<script>
require(["jquery", "bootstrap"], function($) {
$(function() {
$('.left').height(($('body').height() > $(window).height()) ? $('body').height() : $(window).height());
});
var goTo = $(".con");
var guide = $(".sideGuide");
var guideLi = $(".sideGuide li");
var index = 0;
var direct = 0;
var goToFun = function() {
var len = document.getElementById("box"+index).offsetTop-30; //获取div层到页面顶部的高度
direct = 0;
if (index < 0) {
index = 0;
return;
}
if (index >= guideLi.size()) {
index = guideLi.size() - 1;
return;
}
$("html,.tree").stop().animate({scrollTop: len}, 300, "swing", function() {
direct = 0;
});
guideLi.removeClass("on").eq(index).addClass("on");
}
guideLi.each(function(i) {
$(this).click(function() {
index = guideLi.index($(this));
goToFun();
})
});
/* 滚轮事件 */
var scrollFunc = function(e) {
e = e || window.event;
if (e.wheelDelta) {
direct += (-e.wheelDelta / 120);
} else if (e.detail) {
direct += e.detail / 3;
}
var first=document.getElementById("first").val();
if (direct >= first) {
goToFun(index++);
}
if (direct <= 0-first) {
goToFun(index--);
}
};
});
</script>
<style>

.return{padding-top:0.5em;}
.title{text-align:center;font-weight:bold;padding-bottom:1em;border-bottom:2px solid #eee;line-height:1em;}
.extend{text-align:center;color:#666;font-size:1.6em;line-height:3em;}
.content{line-height:2.2em;}
.content table{width:100%}
.left{background-color:#fff;}
.left .desc{color:#666;margin:2em 0;}
.left .list{line-height:3em;}
.left .list li{border-top: 1px solid #E4E1E1;}
.href{cursor: pointer;}
.lh2{line-height:2.4em;}
.lh2 li{border-top: 1px solid #eee;}
.tree{max-height:1000px;overflow-y: scroll;border: 1px solid #DDD;border-top: 0;border-left: 0;margin-top: 20px;}
.sub-title{margin:2em auto 1em;text-align: center;font-size: 20px;}
.on a{color:#000;font-weight: bold;}
</style>
<body style=" position:fixed;" ondragstart="return false" onselectstart="return false" onkeypress="return false" oncontextmenu="return false">
<div class="container-fluid">
<div class="text-right return">
<a class="btn btn-default" href="javascript:history.back()">返回</a>
</div>
<h2 class="title">《日常管理机制》</h2>
<div class="row">
<div class="col-sm-3 hidden-xs left" style="height: 1193px;">
<div class="container-fluid">
<h3>目录</h3>
<div class="sideGuide">
<ul class="list-unstyled lh2">
<li>
<span class="text-muted">
<a href="javascript:void(0)">第一章 总则</a>
</span>
</li>
<li>
<span class="text-muted">
<a href="javascript:void(0)">第二章 分校运营管理规定</a>
</span>
</li>
<li>
<span class="text-muted">
<a href="javascript:void(0)">第三章 分校人员管理规定</a>
</span>
</li>
<li>
<span class="text-muted">
<a href="javascript:void(0)">第四章 品牌管理规定</a>
</span>
</li>
<li>
<span class="text-muted">
<a href="javascript:void(0)">第五章 分校宣传管理规定</a>
</span>
</li>
<li>
<span class="text-muted">
<a href="javascript:void(0)">第六章 分校咨询管理规定</a>
</span>
</li>
<li>
<span class="text-muted">
<a href="javascript:void(0)">第七章 分校教学管理规定</a>
</span>
</li>
<li>
<span class="text-muted">
<a href="javascript:void(0)">第八章 增设分校的管理规定</a>
</span>
</li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="container-fluid" style="background-color:#f5f5f5">
<div class="tree mb40">
<div id="box0" class="con">
<div id="box1" class="con">
<div id="box2" class="con">
<div id="box3" class="con">
<div id="box4" class="con">
<div id="box5" class="con">
<div id="box6" class="con">
<div id="box7" class="con">
</div>
<input id="first" type="hidden" value="8">
</div>
</div>
</div>
</div>
</body>

【效果预览】

js实现目录链接,内容跟着目录滚动显示的简单实例

以上就是小编为大家带来的js实现目录链接,内容跟着目录滚动显示的简单实例全部内容了,希望大家多多支持脚本之家~

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:js实现目录链接,内容跟着目录滚动显示的简单实例
本站链接:http://www.codesec.net/view/484941.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(53)