一、首先來看一下需求(截圖為百度百科“醫?！痹~條)：
1、點擊右側的目錄樹，左側跳轉到指定的錨點位置；
2、滾動鼠標，游標跟隨一起滾動至響應鏈接位置
二、實現思路
1、針對第一個需求，只需要設置游標所在div和右側列表div的position為fixed，根據瀏覽器窗口定位，然后給左側文章各區塊增加id，為右側列表每一項增加對應的href屬性指向響應的錨點即可；
2、針對第二個需求，定義鼠標的滾動事件mousewheel(在ff下事件為DOMMouseScroll)，當時自己琢磨了半天用各種方法計算，但效果始終無法達到要求，后來分析了百度的實現源碼恍然大悟，具體實現參考下圖和代碼部分。
三、代碼實現
/**定于延時執行函數**/ var timeFun = null; /**找到當前頁面滾動到的錨點位置**/ 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); } 這段代碼相當于下面這一句代碼，優秀的代碼就應該拿來多學習！**/ maxDistance > curDistanceToTop && $links.eq(i).offset().top < windowScrollTop + $(window).height() && (maxDistance = curDistanceToTop,result = $links.eq(i)) }); return result; }; /***使用jQuery創建移動動畫*/ 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對象，而代碼中使用$('.link').eq(0)返回的是jQuery對象，jQuery對象才有.offset()方法。
補充說明：eq返回的是jquery對象，而get(n)和索引返回的是dom元素對象。
2、為什么要使用延時執行函數，并且在wheelHandler中clearTimeout(timeFun)?
因為我們正常滾動鼠標會觸發多次的mousewheel事件，為了防止jQuery動畫出現卡頓的現象，將代碼設計成只在鼠標滾輪停下來的時候去觸發，clearTimeout做的事情就是只要鼠標滾輪還在滾動，進入wheelHandler方法，就把前面已加入到延時執行隊列中的方法清除，這樣就可以做到只對最后一個滾動觸發動畫事件，看上去就好像鼠標滾輪停止滾動了才去觸發一樣。
以上所述是小編給大家介紹的jQuery仿寫百度百科的目錄樹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
