前端之家收集整理的这篇文章主要介绍了
js实现目录链接,内容跟着目录滚动显示的简单实例,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如下所示:
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--);
}
};
});
.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;}