编程 Javascript

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

Posted in Javascript onOctober 15, 2016

如下所示：

<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实现目录链接,内容跟着目录滚动显示的简单实例全部内容了，希望大家多多支持三水点靠木~

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript引用对象的方法代码

Aug 13 Javascript

js tab 选项卡

Apr 26 Javascript

JavaScript 变量基础知识

Nov 07 Javascript

javascript 多浏览器事件大全

Mar 23 Javascript

javascript 基础篇1 什么是js 建立第一个js程序

Mar 14 Javascript

javascript 拷贝节点cloneNode()使用介绍

Apr 03 Javascript

bootstrap datepicker限定可选时间范围实现方法

Sep 28 Javascript

jquery实现一个全局计时器(商城可用)

Jun 30 jQuery

使用Vue完成一个简单的todolist的方法

Dec 01 Javascript

jquery.onoff实现简单的开关按钮功能(推荐)

May 24 jQuery

vuex实现及简略解析(小结)

Mar 01 Javascript

JS实现简单移动端鼠标拖拽

Jul 23 Javascript

js控制div层的叠加简单方法

Oct 15 #Javascript

js实现table添加行tr、删除行tr、清空行tr的简单实例

Oct 15 #Javascript

js控制li的隐藏和显示实例代码

Oct 15 #Javascript

jquery控制页面的展开和隐藏实现方法(推荐)

Oct 15 #Javascript

JS常用函数和常用技巧小结

Oct 15 #Javascript

表单元素值获取方式js及java方式的简单实例

Oct 15 #Javascript

JS添加或修改控件的样式(Class)实现方法

Oct 15 #Javascript