1

我在 div 元素中有 50 条数据记录，我只在开头看到 10 条，其他 40 条是 display: none。当我点击下一个时，下一个按钮向下滚动，10 个新的 div 将可见。问题是，如果我打开更多记录，屏幕上可以看到什么，那么下一个按钮就会跑出屏幕。因此，当我第一次加载页面时，下一个按钮与页面顶部的距离例如 300 像素。然后我点击下一步，这个距离将是 600，最后用完，但页面应该滚动到下一个按钮的底部位置。另一个问题是，最后并不总是会出现 10 条记录，因此该问题的静态方法不能正确。所以这例如几乎很好：

$("html, body").animate({ scrollTop: 2*$('#next-button').offset().top-$(document).height()}, 1000);

但是最后，当记录少于 10 条时，它会向下滚动 10 条，并且仅在下一次单击时（当没有元素时）将以适当的高度向下滚动。即使 div 正在移动，是否有任何方法可以始终向下滚动到 div 的底部？没有任何插件会更好。

这是更多代码：

HTML：

<body>
<div id="content">New elements appears here if there was click</div>
<div id="next-button">Next 10</div>
<div id="footer">Lot of data</div>
</body>

JS：

$("#next-button").click(function() {
  //Scroll down the new results and after:
  $("html, body").animate({ scrollTop: 2*$('#next-button').offset().top-$(document).height()}, 1000);
});
4

0 回答 0