美文网首页我爱编程
jquery实现滚动到锚点

jquery实现滚动到锚点

作者: Oo晨晨oO | 来源:发表于2018-05-23 11:29 被阅读313次

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

    错误的写法

    这是网上的一般写法:

    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)
    

    相关文章

      网友评论

        本文标题:jquery实现滚动到锚点

        本文链接:https://www.haomeiwen.com/subject/ydqrjftx.html