杰晶网络

js实现目录链接,内容跟着目录滚动显示的简单实例
网络编程 2024/11/9 佚名
3 2

如下所示：

<script> 
require(["jquery", "bootstrap"], function($) { 
$(function() { 
$('.left').height(($('body').height() > $(window).height()) ".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实现滚动
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网