当前位置: 首页 > 编程笔记 >

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

尉迟安民
2023-03-14
本文向大家介绍js实现目录链接,内容跟着目录滚动显示的简单实例,包括了js实现目录链接,内容跟着目录滚动显示的简单实例的使用技巧和注意事项,需要的朋友参考一下

如下所示:

<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实现目录链接,内容跟着目录滚动显示的简单实例全部内容了,希望大家多多支持小牛知识库~

 类似资料:
  • 有多种方法可用于为文件分配磁盘空间。 选择合适的分配方法将显着影响系统的性能和效率。 分配方法提供了一种使用磁盘并访问文件的方法。 有以下可用于分配的方法。 连续分配 最大化 链接分配 集群 FAT 索引分配 链接索引分配 多级索引分配 索引节点 我们将详细讨论三种最常用的方法。

  • 有很多算法可以使用这些目录来实现。 但是,选择合适的目录实现算法可能会显着影响系统的性能。 目录实现算法根据它们正在使用的数据结构进行分类。 目前主要使用两种算法。 1. 线性列表 在这个算法中,目录中的所有文件都保持为单行列表。 每个文件都包含指向分配给它的数据块的指针和目录中的下一个文件。 特点 在创建新文件时,检查整个列表是否新文件名与现有文件名匹配。 如果它不存在,则可以在开始或结束时创建

  • 本文向大家介绍js实现超简单的展开、折叠目录代码,包括了js实现超简单的展开、折叠目录代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现超简单的展开、折叠目录代码。分享给大家供大家参考。具体如下: 这里介绍一款超简单的目录,展开菜单代码,鼠标点击即可展开,再次点击即可合拢,类似树形菜单的功能,网上见过很多,不多做介绍了,欢迎参考。 运行效果截图如下: 在线演示地址如下: http

  • 运行播放后,当我卷曲服务器时,我看不到index.html文件中的内容。有人能帮我玩游戏吗? 名称:安装webserver并链接到文件夹主机:prod任务: 名称:创建目录文件:路径:/web_hosting状态:目录设置类型:httpd_sys_content_t模式:0775 名称:install yum:name:httpd state:present 名称:配置服务服务:名称:httpd状

  • 本文向大家介绍JS简单实现无缝滚动效果实例,包括了JS简单实现无缝滚动效果实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS简单实现无缝滚动效果。分享给大家供大家参考,具体如下: 效果图如下: 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》

  • 本文向大家介绍纯JSP实现的简单登录示例,包括了纯JSP实现的简单登录示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了纯JSP实现的简单登录的方法。分享给大家供大家参考,具体如下: 文件共有四个web.xml、login.jsp、logout.jsp、welcome.jsp四个文件 测试环境:Tomcat 6.0.x 假设项目名称是LoginSample,我的目录结构是这样的 ...\