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 相关文章推荐
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
原生js实现购物车
Sep 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
You might like
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
python实现简易通讯录修改版
2018/03/13 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Python箱型图处理离群点的例子
2019/12/09 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
军训学生自我鉴定
2014/02/12 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
经理聘任证明
2015/03/02 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python