锚点的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;