JQuery . scrolltop()和.offset().首要问题:它是如何运作的?如何解决

JQuery .scrollTop() and .offset().top issue: how it work? How to solve?

本文关键字：何运作 解决 何解决 offset scrolltop JQuery 问题      更新时间：2023-09-26

我想实现一些平滑的滚动，所以我做了这个脚本:

$('a').click(function(){
    var sclink = $(this).attr('href');
    $('.menu').animate({
        scrollTop: $(sclink).offset().top
    }, 500);
    return false;
});

问题?当我点击"a"时，offset.top()值在另一个奇怪的值中变化，并在它们之间切换?为什么会发生这种情况，我该如何解决?

http://jsfiddle.net/StartStep/9SDLw/2947/

我认为问题在于scroll.top()以另一种方式获得价值…jsfiddle.net/9SDLw/2950/

$('a').click(function(){
    var sclink = $(this).attr('href');
    $('.menu').animate({
        scrollTop: $(sclink).position().top
    }, 500);
    logit('Anchor: '+sclink+'; Offset top value: <b>'+$(sclink).offset().top+'</b>')
    return false;
});

用position代替offset

原因是offset是相对于视口，因此它看起来像你已经滚动太远，但这是因为你的视口区域的顶部被你的布局遮蔽，所以offset实际上不是你想要的，相反，position是。

您还应该在调用animate之前添加对stop的引用，以确保如果用户快速连续单击该行为是预期的(动画队列实际上是刷新的)

考虑到这一点，你的HTML还需要一些工作-例如，可点击的链接没有关闭标签。

将滚动代码更改为:

$('.menu').stop(true,true).animate({
    scrollTop: $(sclink).position().top
}, 500);

演示小提琴

相关文章：