Question

我想实现某种平滑滚动，所以我制作了这个脚本：

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

问题？当我点击＆＃39; a＆＃39; 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;
});

Answer 1

使用position代替offset。

原因是offset相对于视口，因此看起来你滚动得太远了，但这是因为视口区域的顶部被布局遮挡了，所以{{1实际上并不是你想要的，而是offset。

在调用position之前，您还应该添加对stop的引用，以确保用户快速连续点击行为是否符合预期（动画队列基本上是刷新的）

考虑到这一点，您的HTML也需要一些工作 - 例如，可点击链接没有结束标记。

将滚动代码更改为：

animate

JQuery .scrollTop（）和.offset（）。顶部问题：它是如何工作的？怎么解决？

1 个答案:

Demo Fiddle