Jquery滚动停止页面底部答案

【问题标题】：Jquery scroll stops short of page bottomJquery滚动停止页面底部
【发布时间】：2011-04-15 01:51:49
【问题描述】：

我正在使用 jquery 滚动到页面的各个部分。

代码如下：

// Scroll to element
$('#menu li a').click(function(){        
    var elementId = $(this).attr('href');   
    $('html, body').animate({ scrollTop: $(elementId).offset().top }, 1600);
    return false;
    });

<ul id="menu">
  <li><a href="#item1">1</a></li>
  <li><a href="#item2">2</a></li>
</ul>

<div id="item-1">placeholder-1</div>
<div id="item-2">placeholder-2</div>

如您所见，我正在从菜单链接中获取目标元素的 href (#id) 并滚动到目标元素。

但问题在于我的目标元素一直到页面底部，当页面滚动到最后一个时，该元素的顶部无法滚动到页面顶部，因为底部没有足够的页面...我说得通吗？

我正在尝试使用 css 或 jquery 制定解决方案，这意味着无论页面的高度（或底部的填充/边距）如何，当菜单项位于时，元素都将位于视口的顶部点击。

我是否使用 javascript 根据视口的高度添加更多填充？我是否使用了某种溢出技巧？

【问题讨论】：

你能发布这个问题的现场演示吗？也许在JS Fiddle，或JS Bin？
只是好奇，但你知道你可以使用<a href="#id-of-an-element">go to that element</a> 而不涉及任何javascript，对吗？除非您需要更具体的选择，否则仅使用 id 有点糟糕。
@Khez 我猜他想创建动画。 <a href="#id-of-an-element">go to that element</a> 很有用，但没那么漂亮。
@Khez：但我认为 Niels 希望 #id 元素始终位于屏幕顶部，即使 #id 实际上位于 <body> 的底部。
这是正确的亩。我使用 Khez 建议的作为后备方案，但添加了一些动画。

标签： jquery css scroll overflow

【解决方案1】：

您的问题是页面没有您想要的那么高。如果您尝试转到#x 而#x 位于<body> 的底部，那么您将滚动到页面底部，而#x 将在您想要时位于窗口底部顶部。

我认为您唯一的选择是强制<body> 更高。像这样的：

$(document).ready(function() {
    viewport_height = $(window).height();
    $height_hack    = $('<div>&nbsp;</div>').height(viewport_height);
    $('body').append($height_hack);
});

类似的东西会在你的内容底部附加一个（视觉上）空的<div>，这个额外的<div>将与浏览器的视口有相同的高度，这个额外的高度会让你总是滚动你的元素到视口的顶部。

【讨论】：

这是一个很好的解决方案。为多余的 div 感到羞耻，但我更喜欢它而不是滚动停止。
@Niels：是的，这绝对是一个 hack，但至少它不是一个 kludge。这是我能想到的最干净的方法，可以强制身体足够高以正确滚动。
是的，我要这样做。非常非常感谢！

【解决方案2】：

我认为你可以做很多事情来解决这个问题，但我会使用 CSS min-height Property 到 body。我相信这更像是一个个人答案，所以你可以做任何你想做的事情，正如你所说，添加填充，边距......

但我会设置一个最小高度，以使屏幕可以滚动到您想要的项目。

更新

嗯，没错。我没有考虑动态内容。如果内容变大，身体的最小高度可能无法解决问题。

【讨论】：

他希望屏幕滚动到元素，如果我做对了，页面不够大。因此，他可以使用 min-height 设置页面的最小高度，使其足够大，以便滚动将项目放在屏幕顶部。