如下所示：
<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 ondragstart="return false" onselectstart="return false" onkeypress="return false" oncontextmenu="return false"> <div> <div> <a href="javascript:history.back()">返回</a> </div> <h2>《日常管理机制》</h2> <div> <div> <div> <h3>目录</h3> <div> <ul> <li> <span> <a href="javascript:void(0)">第一章 总则</a> </span> </li> <li> <span> <a href="javascript:void(0)">第二章 分校运营管理规定</a> </span> </li> <li> <span> <a href="javascript:void(0)">第三章 分校人员管理规定</a> </span> </li> <li> <span> <a href="javascript:void(0)">第四章 品牌管理规定</a> </span> </li> <li> <span> <a href="javascript:void(0)">第五章 分校宣传管理规定</a> </span> </li> <li> <span> <a href="javascript:void(0)">第六章 分校咨询管理规定</a> </span> </li> <li> <span> <a href="javascript:void(0)">第七章 分校教学管理规定</a> </span> </li> <li> <span> <a href="javascript:void(0)">第八章 增设分校的管理规定</a> </span> </li> <li></li> </ul> </div> </div> </div> <div> <div> <div> <div id="box0"> <div id="box1"> <div id="box2"> <div id="box3"> <div id="box4"> <div id="box5"> <div id="box6"> <div id="box7"> </div> <input id="first" type="hidden" value="8"> </div> </div> </div> </div> </body>
【效果预览】
以上就是小编为大家带来的js实现目录链接,内容跟着目录滚动显示的简单实例全部内容了，希望大家多多支持查字典教程网~