jquery animate scrollTop position / offset不起作用

Question

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

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

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

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

要测试它，只需添加超过15行，然后您将看到结果。

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

谢谢

Answer 1

这不起作用的原因如下：

position（）方法返回到窗口顶部的相对距离。 由于您限制了div的大小，因此到窗口顶部的距离不一定是您要对其进行测量的距离，但是您希望根据它对包含它的div的偏移来测量它。

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

您可能有兴趣检查ScrollTo jQuery插件 ：

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

这是你使用插件的小提琴

这是一个没有使用插件的解决方案（ 这里是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++;
});​