jquery - div 中的滚动顶部在 jquery 中不起作用

Question

当我为主体滚动设置动画时，我想在 div 中为 scrolltop 制作动画，它对我来说工作正常

但是当我在 div 中使用它时，它失败了。

这对我来说效果很好 http://jsfiddle.net/yazaLyxs/

$('body').animate({
    scrollTop: $('#myId').offset().top
}, 'slow');

那为什么这段代码不起作用？

$('.myClass').animate({
    scrollTop: $('#myId').offset().top
}, 'slow');

http://jsfiddle.net/qVWuv/198/

Answer 1

好吧，因为没有人准确回答全部内容:

<强> .position().top不考虑元素的边距。 jsFiddle demo

<小时/>

您的第一个示例可能适用于 Chrome，但不适用于 Firefox，因为 documentElement 中存在细微差异。 .

要考虑到它，您必须使用:

$('html, body').animate({

现在，让我们看看方法 .position() 之间的区别和.offset() :

<强> .position()

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

<强> .offset()

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

如果以上都清楚了，并且你想获取内child元素位置在定位父级^*内，您需要使用 .position() 。

#parent {
    height: 300px;
    background: teal;
    margin: 500px 0 0 0;
    overflow:scroll;
    position:relative; /* NEEDED! */
}

现在，您可能已将内部元素边距设置为 500px但它的最高位置仍然是 0 像素!

console.log( $('#child').position().top ); // 0

因此您需要设置top:样式(而不是 margin )和 position:到#save元素以便使用$('#child').position().top : http://jsfiddle.net/RokoCB/qVWuv/203/ (或者至少在其或某些内容之前放置一些其他元素)。

_{*如果您没有为父元素设置“position:”CSS 属性，则需要减去父元素的顶部位置或偏移量。}