最近要做一个点击导航按钮滚动到锚点的需求, 在网上查阅资料, 发现全都是不完善的.

错误的写法

这是网上的一般写法:

var id="tr1";
$("html,body").animate({scrollTop: $("tr#"+id).offset().top}, 500);

这样写, 只对第一次有正确效果, 因为元素的offset()返回值是变化的!

正确写法:

要通过计算, 把已经滚动的距离加到offset().top上面

    let mao = $('#' + id)
    let scrollTop = $('.parent').scrollTop()
    let off = mao.offset().top + scrollTop
    $('.parent').stop(true).animate({scrollTop: off+'px'}, 500)