锚点的animate使用过程中定位不准确的问题小记

源码:

$('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;
上一篇:JS~字符串长度判断,超出进行自动截取(支持中文)


下一篇:如何去设计一个自适应的网页设计或HTMl5