最新推荐文章于 2024-03-10 22:11:35 发布

听海Movie

最新推荐文章于 2024-03-10 22:11:35 发布

阅读量2.4k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u011781769/article/details/45912847

版权

本文介绍如何使用JavaScript实现在目录点击时，页面内容自动滚动到相应位置，实现目录与内容的联动效果。通过监听目录点击事件，计算目标内容的位置，并使用浏览器的scrollTo方法平滑滚动至目标区域。

摘要由CSDN通过智能技术生成

<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 sc