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

Posted 2023-05-08

【中文标题】div中的滚动顶部在jquery中不起作用

【英文标题】：scrolltop within a div is not working in jquery

【发布时间】：2015-02-13 05:31:27

【问题描述】：

当我为身体滚动设置动画时，我想在 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/

【问题讨论】：

有你的.myClass元素滚动条吗？是否包含#myId 元素？

是的 myClass 有一个滚动条，我在 myClass 中使用 mtId

jsfiddle.net/qVWuv/199 这里工作正常

【参考方案1】：

好的，因为没有人准确回答到底是怎么一回事：

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

---

您的第一个示例可能适用于 Chrome，但不适用于 Firefox，原因是 documentElement 略有不同。

要解决这个问题，您必须使用：

$('html, body').animate(

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

.position()

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

.offset()

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

如果上面的内容很清楚，并且您想获得内部 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

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

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

【参考方案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

【参考方案3】：

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

这很好，因为您将 div 设置为 margin-top:500px;使垂直滚动到身体上方的图片。

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

查看Jsfiddle Demo