我想要这个小按钮,当您单击它时,会添加一个新的表格行,并使用 jQuery 平滑滚动到该新添加的行。
我在这里创建了一个示例 http://jsfiddle.net/2EBNH/
请注意,这是我的代码的简化版本。真正的允许将行添加到表中的任何位置(不必在最后一行),所以不要简单地告诉我我总是可以滚动到底部。
但即使只是滚动到底部,代码也不起作用。我假设它适用于前 10 行,但如果添加了更多行,则位置/偏移(我都尝试过)似乎不正确。
要测试它,只需添加超过 15 行即可看到结果。
我注意到,如果您在单击按钮后每次将滚动条移动到顶部,它似乎会以某种方式起作用。
谢谢
最佳答案
这不起作用的原因如下:
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++;
});
关于javascript - jquery animate scrollTop 位置/偏移量不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12740374/