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

Javascript 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 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
You might like
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
js的各种数据类型判断的介绍
2019/01/19 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
Java基础类库面试题
2013/09/04 面试题
教学评估实施方案
2014/03/16 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
应届生求职自荐信
2014/07/04 职场文书
导游词怎么写
2015/02/04 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技