滚动到页面的底部元素

Question

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

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

当您单击其中一个可用链接时，浏览器的窗口将滚动到右侧相应项目所在的位置。我想要实现一件事：

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

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

Answer 1

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

使用它

Answer 2

这将在.main div的底部添加额外的空间：

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

或者你可以为.main添加一个最小高度并将其设置为一定量以保证足够的空间。

Answer 3

我认为，实现这一目标的唯一方法是在底部实际添加一些内容。

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