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

我希望有一个小按钮，当您单击它时，会添加一个新的表行，并使用jQuery平滑地滚动到新添加的行

我在这里创建了一个示例

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

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

要测试它，只需添加15行以上即可看到结果

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

---

谢谢

这不起作用的原因如下：

position（）方法返回到窗口顶部的相对距离。由于您限制了div的大小，因此到窗口顶部的距离不一定是您想要测量它的依据，而是您想要测量它相对于包含它的div的偏移量

换言之：当滚动在顶部时，您添加了一个新元素（位于底部），相对于窗口的偏移/位置与您想要滚动的像素量相同，因此它可以正常工作。但是，如果已经滚动到底部，元素与窗口顶部之间的距离大约为100px（div的高度），因此它将滚动到100px，这意味着如果滚动距离大于100px，它实际上会上升

您可能有兴趣检查以下内容：

var rownum=1；
$（“输入”）。单击（函数（）{
$（'table'）。追加（''+rownum+'：row'）；
$（“#行-”+rownum）。滚动到({
持续时间：400，
放松：“线性”
});
rownum++；
});​

下面是一个不使用插件（）的解决方案：

var rownum=1；
$（“输入”）。单击（函数（）{
$（'table'）。追加（''+rownum+'：row'）；
var$row=$（“#row-”+rownum）；
var topOffset=$row.parent（）.parent（）.parent（）.scrollTop（）+$row.position（）.top；
$（'div'）.animate（{scrollTop:topOffset+“px”}，400）；
rownum++；
});​

答案是否解决了问题，或者您对此仍有疑问？是的，它适用于1个div，但不超过1个。哦，等等，如果我的div超过1个，它就不起作用。请参见此处，您在div内容和td之间添加了一个div。这意味着您必须添加一个额外的parent（）调用。然后它就起作用了。

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++;
});​

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++;
});​