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

时间: 2016-10-13

JS实现超精简的链接列表在固定区域内滚动效果代码

本文实例讲述了JS实现超精简的链接列表在固定区域内滚动效果代码.分享给大家供大家参考,具体如下: 这款超精简版的链接列表文字滚动代码,可在指定的区域内滚动,当然,区域大小可以自己设置的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-link-list-scroll-style-codes/ 具体代码如下: <html> <HEAD> <TITLE>文字链接列表滚动</TITLE> <META

JS实现随页面滚动显示/隐藏窗口固定位置元素

窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel

js 实现菜单左右滚动显示示例介绍

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">      <html xmlns="http://www.w3.org/1999/xhtml">      <head>      <meta

js实现目录定位正文示例

一:先查看截图效果 1)  2)点击左侧导航栏里的目录会对应到对应的层 二:下载引进jquery-1.7.2.min.js文件 三:页面代码: 复制代码 代码如下: <pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

node.js遍历目录的方法示例

本文介绍了node.js遍历目录的方法示例,分享给大家,也给自己留个笔记,具体如下 同步遍历 const fs = require('fs'); const path=require('path'); function travel(dir,callback){ fs.readdirSync(dir).forEach((file)=>{ var pathname=path.join(dir,file) if(fs.statSync(pathname).isDirectory()){ travel

JS实现按钮添加背景音乐示例代码

1-代码 <html> <head> <meta charset="utf-8"> <title>js实现按键声</title> </head> <body> <ul> <li> <a href="menu-list" rel="external nofollow" rel="external nofollow"

JS鼠标滚动分页效果示例

首先先看问题: 在开发的时候,看到这种现象 就会思考:为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢. 解决办法就是进行分页,但是在项目中用到的插件,不能控制样式,改变分页的宽度,样式就会乱掉.最简单的办法就是不分页(^_^) 但是既然是自己份内的事,为啥不做好呢?那就写分页呗,滚动分页! 问了其他同事,其他同事也...你去百度去.... 是啊,网上一大堆 ,但都是乱七八糟的,也没有效果图...坑 经过一番思考,和百度 思路来了: 需要了解三个dom元素,

原生js封装运动框架的示例讲解

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子 如下代码: #div{ width: 100px; height: 100px; background

Vue.js展示AJAX数据简单示例讲解

最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐. 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单.优美.自然,而且便于与在用的页面框架集成. 感谢vue.js的作者,官方网站地址:https://cn.vuejs.org 举个小例子.注意,代码中使用jQuery.bootstrap.没有用过bootstrap不影响阅读本文. 一.返回的JSON数据示例 [ {"playid":"12113c676a4e

Android中js和原生交互的示例代码

本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf

使用D3.js创建物流地图的示例代码

本文介绍了使用D3.js创建物流地图的示例代码,分享给大家,具体如下: 示例图 制作思路 需要绘制一张中国地图,做为背景. 需要主要城市的经纬坐标,以绘制路张起点和终点. 接收到物流单的城市,绘制一个闪烁的标记. 已经有过物流单的目标城市,不再绘制路线. 每次新产生一笔物流单,都有一个标记沿路线移向目标的动画效果. 绘制结束后的数据,需要清理掉,以减少对浏览器的资源占用. 开始撸码 1.创建网页模板 加载D3JS,为了方便调试,直接下载d3.js文件在本地,实际使用的时候,可以换成加载路径.注意

Vue监听滚动实现锚点定位(双向)示例

在项目需求中需要实现一个滚轴联动锚点的功能 效果图如下: 功能代码demo如下: <template> <div class="container"> <div class="wrapper"> <div class="section" style="height:500px;width:100%" v-for="(item, index) in list" :ke