本文详解JavaScript实现楼层导航的核心逻辑，包括点击跳转时的坐标计算公式，以及滚动监听时通过倒序遍历确定当前激活导航项的区间判断算法。结合代码示例，解析如何利用offsetTop和scrollTop实现精准的页面锚点定位与UI状态同步。
效果如图所示：
点击跳转的坐标计算逻辑
1. 点击导航项实现跳转：
页面滚动距离的计算公式为：目标板块在文档中的垂直坐标减去起始板块（即目标位置）到视图顶部的距离。
document.body.scrollTop = scrollLength;
document.documentElement.scrollTop = scrollLength;
滚动监听与导航高亮算法
2. 滚动条滚动时，对应的导航链接需自动高亮：
每个板块的导航链接对应一个特定的长度区间。当滚动条滚动的距离落入该区间时，对应的导航条即被选中。区间的范围定义为：当前板块的scrollTop值（包含）至下一板块的scrollTop值（不包含）。
以第一板块为例，其区间范围是从0到第二板块的scrollTop值（即第一板块的高度）。当滚动条滚动的距离处于该区间内时，第一个导航链接被激活。
确定当前激活区间的方法是将链接列表倒序排列，并依次循环判断。找到第一个满足“滚动条滚动的距离大于区间最小值”条件的链接，即为当前激活的链接。
var currIndex=0;
window.onscroll = function () {
var $cptop = $('.cp-top');
var scrollLength = document.documentElement.scrollTop || document.body.scrollTop; //滚动条滚动的距离
var list_area = _.map($('#area li.group'), function (item, index) {
return { top: item.offset().top, index: index };
}); //所有的板块
list_area = _.sortBy(list, function (item) { return -item.index; }); //倒序
var reachedArea = _.find(list_area, function (item) {
return scrollLength >= item.top;
}); //滚动的距离大于该区间的最小top值
if (currIndex != reachedArea.index) {
currIndex = reachedArea.index;
$(".navField li").removeClass('selected');
$(".navField li").eq(reachedField.index).addClass('selected');
}
}以上为本文全部内容，希望这些内容能对您的学习或工作有所帮助，欢迎继续支持本站！