jquery animate scrollTop 位置/偏移量不起作用

Posted 2023-05-08

【中文标题】jquery animate scrollTop 位置/偏移量不起作用

【英文标题】：jquery animate scrollTop position/offset doesnt work as such

【发布时间】：2012-09-26 06:18:35

【问题描述】：

我想要这个小按钮，当你点击它时，会添加一个新的表格行，并使用 jQuery 平滑滚动到新添加的行。

我在这里创建了一个示例http://jsfiddle.net/2EBNH/

请注意，这是我的代码的简化版本。真正的允许在表格中的任何位置添加行（不必在最后一行），所以不要简单地告诉我我总是可以滚动到底部。

但即使只是滚动到底部，代码也不起作用。它适用于我假设的前 10 行，但如果您添加了更多行，位置/偏移量（我都尝试过）似乎不正确。

要对其进行测试，只需添加超过 15 行即可看到结果。

我注意到，如果您在单击按钮后每次将滚动条移到顶部，它似乎会以某种方式工作。

谢谢

【问题讨论】：

答案是否解决了问题，还是您对此仍有疑问？

是的，它适用于 1 个 div，但不超过 1 个，请参阅 jsfiddle.net/7d2Yw

【参考方案1】：

这不起作用的原因如下：

position() 方法返回到窗口顶部的相对距离。由于您限制了 div 的大小，因此到窗口顶部的距离不一定是您想要衡量的，但您希望衡量它相对于包含它的 div 的偏移量。

换句话说：当滚动在顶部并且您添加了一个新元素（到底部）时，窗口的偏移量/位置与您要滚动的像素量相同，因此它可以工作然后。但是，如果你已经滚动到底部，元素到窗口顶部的距离刚好在 100px 左右（div 的高度），所以它会滚动到 100px，这意味着如果滚动距离大于那，它实际上会上升。

您可能有兴趣查看ScrollTo jQuery plugin：

var rownum = 1;
$('input').click(function () 
    $('table').append('<tr id=row-' + rownum + '><td>' + rownum + ': row</td></tr>');
    $('#row-' + rownum).ScrollTo(
        duration: 400,
        easing: 'linear'
    );
    rownum++;
);​

Here is your fiddle using the plugin

这是一个不使用插件的解决方案 (and here's the jsfiddle)：

var rownum = 1;
$('input').click(function () 
    $('table').append('<tr id=row-' + rownum + '><td>' + rownum + ': row</td></tr>');
    var $row = $('#row-' + rownum);
    var topOffset = $row.parent().parent().parent().scrollTop() + $row.position().top;
    $('div').animate(scrollTop: topOffset + "px", 400);
    rownum++;
);​

【讨论】：

哦，等等，如果我有超过 1 个 div，它就不起作用。见这里jsfiddle.net/7d2Yw

您在 div#content 和 td 之间添加了一个 div。这意味着您必须添加一个额外的 parent() 调用。然后就可以了。