jQuery模仿百度百科的目录树

一、先看需求(截图是百度百科“医保”词条):

1.点击右边的目录树，跳转到左边指定的锚点；

2.滚动鼠标，光标将滚动到响应链接位置

二，理念的实现

1.对于第一个要求，只需要将光标所在的div和右列表中的div的位置设置为固定，位置根据浏览器窗口，然后给左文章的每个块添加id，给右列表中的每个项目添加对应的href属性，指向响应的锚点；

2.考虑到第二个需求，定义了鼠标滚动事件mouse wheel(ff下的事件是DOMMouseScroll)。当时我思考了很久，用了各种方法计算，但效果始终达不到要求。后来分析了百度的实现源代码，突然意识到。具体实现请参考下图和代码部分。

第三，代码实现

/* *计划延迟执行函数* */var timeFun=null；/* *查找当前页面滚动到的锚点* */var Find href=function(){ var $ links=$(')。链接')；var windowScrollTop=$(window)。scroll top()；var maxDistance=10000var结果=$ links . eq(0)；$.每一个($links，function(i，link){ var curDistanceToTop=math . ABS($ links . eq(I))。偏移量()。top-windowscroll top)；/* * if(MaxDistance CordeSistancetotop($ links . eq(I))。偏移量()。top (windowScrollTop $(window)。height())))){ maxDistance=kederstancetotop；result=$ links . eq(I)；}此代码相当于以下代码。优秀的代码应该用来学习更多！* */MaxDistance CodeStatistencotop $ links . eq(I)。偏移量()。top windowScrollTop $(窗口)。height()(maxDistance=kederstancetotop，result=$ links . eq(I))})；返回结果；};/* * *使用jQuery创建移动动画*/var move=function(dis){ var $ arrow=$('。箭头')；$arrow.animate({top:dis}，“normal”)；}/* * wheel事件处理程序* */var wheel处理程序=function(e){ clear time out(time fun)；timeFun=setTimeout(function(){ var href=find href()；var index=href[0]. id . substring(1)；var dis=30*(索引-1)10；移动(dis)；},600);};/* * *登记车轮事件*/$(“车身”)。on('鼠标滚轮'，滚轮处理器)；第四，提示

1.$('.link')[0]返回一个普通的Dom对象，而$('。链接')。eq(0)返回一个jQuery对象，它有一个。offset()方法。

注意：eq返回jquery对象，而get(n)和index返回dom元素对象。

2.为什么要在wheelHandler中使用延迟来执行函数和clearTimeout(timeFun)？

当我们正常滚动鼠标时，鼠标滚轮事件会被触发很多次。为了防止jQuery动画被卡住，代码被设计成只在鼠标滚轮停止时触发。clearTimeout所做的是，只要鼠标滚轮还在滚动并进入wheelHandler方法，就清除已经添加到延迟执行队列中的方法。这样，只能为最后一次滚动触发动画事件，这似乎只有在鼠标滚轮停止滚动时才会触发。

以上是边肖介绍的jQuery模仿的百度百科目录树，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！