源码:
$('html, body, .S').animate({ scrollTop: $('.a1').offset().top - 133}, { duration: 1500, easing: "swing" });
bug描述1:当滚动的主体不是body时,容易出现滚动不精确的问题
原因1:滚动条overflow并不在body标签上,body标签设置为禁止滚动了,所以不能使用$('html, body'),此时$('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
总修改:
var top_height = $('.a1')[0].offsetTop;
$('html body .S .S1').animate({scrollTop: top_height - 133}, { duration: 500, easing: "swing" });
$('html body .S .S1').offset().top = 0;