滚动到页面的底部元素

Scrolling to bottom elements of a page

本文关键字：底部 元素 滚动      更新时间：2023-09-26

我准备了一个非常自我解释的jsfiddle：http://jsfiddle.net/nt7xzxur/里面有以下滚动代码：

function smoothScroll(hash) {
$('html, body').animate({
    scrollTop: $(hash).offset().top
}, 750);

当你点击其中一个可用的链接时，浏览器的窗口会滚动到右侧相应项目所在的位置。不过，有一件事我想实现：

显然，最后两个项目不会滚动到顶部，因为它们下面没有足够的内容可以滚动我希望所有项目都能滚动到顶部，但到目前为止，我还没有找到一个好的方法。我可以在最后一个项目下面添加一些空行，但它会增加右侧滚动条的长度，而且不是很优雅。

有没有其他方法可以通过css、js或其他方式实现它？

您可以动态计算额外的空间，并将其添加到页面末尾。我创建了一个小代码，您可以查看它并根据需要使用它http://jsbin.com/mubugusido/6/edit?html，js

这将在.maindiv:的底部添加额外的空间

wH = $(window).height();
$extraH = $('<div></div>').height(wH);
$('.main').append($extraH);

或者，你可以在.main上添加一个最小高度，并将其设置为一定的值，以确保有足够的空间。

我相信实现这一点的唯一方法就是在底部添加一些内容。

您无法将页面滚动到第五项的顶部，因为下面没有任何内容可显示，因为页面已结束。

相关文章：