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 相关文章推荐
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
JS控制表单提交的方法
Jul 09 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
详解php用static方法的原因
2018/09/12 PHP
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
Node.js+ELK日志规范的实现
2019/05/23 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python requests 使用快速入门
2017/08/31 Python
tensorflow如何批量读取图片
2019/08/29 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
django实现类似触发器的功能
2019/11/15 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
python设置表格边框的具体方法
2020/07/17 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
幼儿园园长岗位职责
2013/11/26 职场文书
生物专业个人自荐信范文
2013/11/29 职场文书
大学活动策划书范文
2014/01/10 职场文书
连锁超市项目计划书
2014/09/15 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis