js实现楼层导航功能

该图如下：

1.点击跳转到相应的区域：

页面滚动的距离=目标板在文档中的垂直坐标-从起始板(目标位置)到视图顶部的距离；

document . body . scroll top=scroll length；document . document element . scroll top=scroll length；2.当滚动滚动条时，相应的导航链接被激活

每个板块的导航链接对应一个长度区间。当滚动条的长度在此区间内时，导航栏被选中。间隔范围从当前板的滚动顶部值(包括)到下一个板的滚动顶部值(不包括)。

比如第一个板块的区间为0~第二个板块的scrollTop值(即第一个板块的高度)，当滚动条的滚动距离落在这个区间内时，第一个链接被激活。

如何确定区间？链接向后排列，第一个链接(滚动条滚动时距离间隔的最小值)是活动链接。

var currIndex=0；window . on scroll=function(){ var $ cptop=$('。CP-top’)；var scrollength=document . document element . scroll top | | document . body . scroll top；//滚动条的滚动距离为var list _ area=_。地图($ ('#区域li。group ')、function (item，index) {return {top : item。偏移量()。顶部，指数：指数}；});//list _ area=_。排序依据(列表、函数(项){ return-item . index；});//var到达面积=_。find (list _ area，function(item){ return scroll length=item . top；});//滚动距离大于最小顶值if (currIndex！=ReacheDarea . index){ Currindex=ReacheDarea . index；$('.nav field Li’)。removeClass('选定')；$('.nav field Li’)。eq(reachedField.index)。addClass('选定')；}}以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！