一、首先來看一下需求(截圖為百度百科“醫(yī)保”詞條)：

1、點(diǎn)擊右側(cè)的目錄樹，左側(cè)跳轉(zhuǎn)到指定的錨點(diǎn)位置；

2、滾動(dòng)鼠標(biāo)，游標(biāo)跟隨一起滾動(dòng)至響應(yīng)鏈接位置

二、實(shí)現(xiàn)思路

1、針對(duì)第一個(gè)需求，只需要設(shè)置游標(biāo)所在div和右側(cè)列表div的position為fixed，根據(jù)瀏覽器窗口定位，然后給左側(cè)文章各區(qū)塊增加id，為右側(cè)列表每一項(xiàng)增加對(duì)應(yīng)的href屬性指向響應(yīng)的錨點(diǎn)即可；

2、針對(duì)第二個(gè)需求，定義鼠標(biāo)的滾動(dòng)事件mousewheel(在ff下事件為DOMMouseScroll)，當(dāng)時(shí)自己琢磨了半天用各種方法計(jì)算，但效果始終無法達(dá)到要求，后來分析了百度的實(shí)現(xiàn)源碼恍然大悟，具體實(shí)現(xiàn)參考下圖和代碼部分。

三、代碼實(shí)現(xiàn)

/**定于延時(shí)執(zhí)行函數(shù)**/ var timeFun = null; /**找到當(dāng)前頁面滾動(dòng)到的錨點(diǎn)位置**/ var findHref = function(){  var $links = $('.link');  var windowScrollTop = $(window).scrollTop();  var maxDistance = 10000;  var result = $links.eq(0);  $.each($links,function(i,link){   var curDistanceToTop = Math.abs($links.eq(i).offset().top - windowScrollTop);   /**if(maxDistance > curDistanceToTop && ($links.eq(i).offset().top < (windowScrollTop + $(window).height()))){    maxDistance = curDistanceToTop;    result = $links.eq(i);   } 這段代碼相當(dāng)于下面這一句代碼，優(yōu)秀的代碼就應(yīng)該拿來多學(xué)習(xí)！**/   maxDistance > curDistanceToTop && $links.eq(i).offset().top < windowScrollTop + $(window).height() && (maxDistance = curDistanceToTop,result = $links.eq(i))  });  return result; }; /***使用jQuery創(chuàng)建移動(dòng)動(dòng)畫*/ var move = function (dis) {  var $arrow = $('.arrow');  $arrow.animate({top:dis},'normal'); } /**滾輪事件Handler**/ var wheelHandler = function(e){  clearTimeout(timeFun);  timeFun = setTimeout(function(){   var href = findHref();   var index = href[0].id.substring(1);   var dis = 30*(index-1)+10;   move(dis);  },600); }; /***注冊滾輪事件*/ $('body').on('mousewheel',wheelHandler);

四、Tips

1、$('.link')[0]返回的是普通的Dom對(duì)象，而代碼中使用$('.link').eq(0)返回的是jQuery對(duì)象，jQuery對(duì)象才有.offset()方法。

補(bǔ)充說明：eq返回的是jquery對(duì)象，而get(n)和索引返回的是dom元素對(duì)象。

2、為什么要使用延時(shí)執(zhí)行函數(shù)，并且在wheelHandler中clearTimeout(timeFun)?

因?yàn)槲覀冋L動(dòng)鼠標(biāo)會(huì)觸發(fā)多次的mousewheel事件，為了防止jQuery動(dòng)畫出現(xiàn)卡頓的現(xiàn)象，將代碼設(shè)計(jì)成只在鼠標(biāo)滾輪停下來的時(shí)候去觸發(fā)，clearTimeout做的事情就是只要鼠標(biāo)滾輪還在滾動(dòng)，進(jìn)入wheelHandler方法，就把前面已加入到延時(shí)執(zhí)行隊(duì)列中的方法清除，這樣就可以做到只對(duì)最后一個(gè)滾動(dòng)觸發(fā)動(dòng)畫事件，看上去就好像鼠標(biāo)滾輪停止?jié)L動(dòng)了才去觸發(fā)一樣。

以上所述是小編給大家介紹的jQuery仿寫百度百科的目錄樹，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！