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

如下所示：

脚本需要(['jquery '，' bootstrap']，函数($) { $(函数(){ $(')).左')。高度(($(“正文”).高度()$(窗口)。高度())?$(“正文”).高度(): $(窗口)。高度());});var goTo=$(' .con’)；var guide=$(' .侧导板’)；var guideLi=$(' .边导李’)；定义变量索引=0;var direct=0；var Gotofun=function(){ var len=document。getelementbyid(' box '索引).偏移顶部-30；//获取差异层到页面顶部的高度direct=0；if(index 0){ index=0；返回；} if(index=guideli。size()){ index=guideli。size()-1；返回；} $('html，树')。停止()。animate({scrollTop: len}，300，' swing '，function(){ direct=0；});guideLi.removeClass('on ')。eq(指数)。添加CLaSS(' on ')；} guideLi。每个（函数(一){ $(这个).单击(function(){ index=guideli。索引($(this))；goToFun()；}) });/* 滚轮事件*/var scrollFunc=function(e){ e=e | | window。事件；if(e轮增量){ direct=(-e轮增量/120)；} else if(e . detail){ direct=e . detail/3；} var first=文档。getelementbyid(' first ').val()；if(direct=first){ Gotofun(index)；} if(direct=0-first){ Gotofun(index-)；} };});/脚本风格。返回{ padding-top :0.5 em；} .title { text-align :居中；字体粗细：加粗；填充-底部：1 em边框-底部：2px实心# eee线高：1毫米；} .扩展{ text-align :居中；color : # 666 font-size :1.6 em；线高：3 em} .内容{行高：2.2 em} .内容表{width:100%} .左{底色： # fff} .向左desc { color : # 666；保证金3 33602 em 0；} .向左列表{行高：3 em} .向左。列表li{border-top: 1px实心# E4E1E1}。href { cursor:指针；} .lh2 {线高：2.4 em} .lh2 li{border-top: 1px实心# eee}。树{最大高度：1000像素；溢出-y:滚动；border: 1px固体# DDD；边框-top : 0；边框-左侧： 0;边距-top : 20px；} .副标题{ margin:2em auto 1em文本对齐：中心；font-size : 20px} .在{ color : # 000 font-weight :粗体；}/style body style='位置：固定；'ondragstart=' return false ' on selectstart=' return false ' on key=上下文菜单上的' return false '=' 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 : 1193 px；'' div class='容器-流体h3目录/H3 div=' 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 class=' col-sm-9 ' div class=' container-fluid ' style='底色： # f5f 5 ' div class=' tree mb40 ' div id=' box 0 ' class=' con ' div id=' box 1 ' class=' con ' div id=' box 2 ' class=' con ' div id=' box 3 ' class=' con ' div id=' box 4 ' class=' con ' div id=' box 5 ' class=' con div id=' box 6 ' class=' con ' div id=' box 7 ' class=' con '/div输入效果预览】

以上是边肖带来的js实现目录链接，内容随目录的简单示例一起滚动。希望大家多多支持我们~