錨點的animate使用過程中定位不準確的問題小記
阿新 • • 發佈:2019-02-13
nbsp offset eas height mat 第一次 精確 wing dom
源碼:
$(‘html, body, .S‘).animate({ scrollTop: $(‘.a1‘).offset().top - 133}, { duration: 1500, easing: "swing" });
bug描述1:當滾動的主體不是body時,容易出現滾動不精確的問題
原因1:$(‘html, body, .S‘)包含了3個dom,一旦出現再有一個外層滾動條時,找不到最內層;並且$(‘html body .S .S1‘).offset().top也會被移動到-133
修改1:改成$(‘html body .S .S1‘)只包含S1,可準確獲取到Dom; 並且每次跳轉後將 $(‘html body .S .S1‘).offset().top 賦值為0;
bug描述2:基於修改1,出現點擊第一次錨點時候定位準確,但是第二次時候就回到第一個了
原因2:第一次點擊a1時,$(‘.a1‘).offset().top是正數,並且原點為0;,但是第二次點擊a2時,原點不為0,並且此時$(‘.a2‘).offset().top與原點的差值可能為負數或者其他數值,不等於應有的top值;;也就是說,$(‘.a‘).offset().top的值是一個動態值
修改2:改成$(‘.a‘)[0].offsetTop
總修改:
1 var top_height = $(‘.a1‘)[0].offsetTop; 2 $(‘html body .S .S1‘).animate({scrollTop: top_height - 133}, { duration: 500, easing: "swing" });3 $(‘html body .S .S1‘).offset().top = 0;
錨點的animate使用過程中定位不準確的問題小記