滚动到页面的底部元素

Question

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

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

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

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

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

Answer 1

这将在您的 .main div:

底部添加额外的 space

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

或者您可以向 .main 添加一个最小高度并将其设置为一定数量以保证有足够的 space。

Answer 2

我相信你能做到这一点的唯一方法就是在底部实际添加一些内容。

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

Answer 3

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

Scrolling to bottom elements of a page