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()

获取匹配元素集中第一个元素的当前坐标，相对于偏移父元素。

<强> .offset()

获取第一个元素的当前坐标，或者在匹配元素集中相对于文档设置每个元素的坐标。

如果以上内容清楚，并且您希望在定位的父^* 中获得内部child元素位置，则需要使用{ {1}}。

.position()

现在，您可能已将内部元素边距设置为#parent { height: 300px; background: teal; margin: 500px 0 0 0; overflow:scroll; position:relative; /* NEEDED! */ }，但顶部位置仍为 500px px！

0

因此，您需要为console.log( $('#child').position().top ); // 0元素设置top:样式（而不是margin）和position:才能使用#save：{{ 3}} （或者至少在其之前放置一些其他元素或某些内容）。

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

Answer 2

如果是html

<div class="myClass">
    <label></label>
    <label id="myId">target Label</label>
</div>

和css

div{
    height: 100px;
    width: 100px;
    overflow: auto;
}

在js

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

一切都应该有用.. Jsfiddle

Answer 3

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

这个工作正常，因为你设置div在margin-top：500px;使垂直滚动到身体上的图片。

所以你需要一个有足够高度的DOM元素来获得垂直滚动，请注意这个元素是父元素而不是目标元素，即包含你的div的标签。

选中此Jsfiddle Demo

div中的scrolltop在jquery中不起作用

3 个答案: