Jquery滚动在页面底部以下停止

我正在使用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>

//滚动到元素
$（'#菜单li a'）。单击（函数（）{
var elementId=$（this.attr（'href'）；
$（'html，body'）.animate（{scrollTop:$（elementId.offset（）.top}，1600）；
返回false；
});




占位符-1
占位符-2

如您所见，我正在从菜单链接抓取目标元素的href（#id）并滚动到目标元素

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

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

---

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

我认为可以做很多事情来解决这个问题，但我会使用

CSS最小高度属性

来

body

。我相信这更像是一个个人的回答，所以你可以做任何你想做的事情，就像你说的，添加填充，边距

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

---

更新

---

嗯，对。我没有考虑动态内容。如果内容变得更大，那么正文的最小高度可能无法解决问题。

你的问题是页面没有你想要的那么高。如果您尝试转到

#x

，并且

#x

位于

的底部，则您将滚动到页面底部，如果希望将

#x

置于窗口顶部，则它将位于窗口底部

我认为你唯一的选择是强迫

更高。大概是这样的：

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

$（文档）.ready（函数（）{
视口高度=$（窗口）.height（）；
$height\u hack=$（''）.height（视口高度）；
$（'body'）。追加（$height\u hack）；
});

---

类似的东西会在内容的底部添加一个（视觉上）空的

，这个额外的

将与浏览器的视口具有相同的高度，这个额外的高度将使您始终将元素滚动到视口的顶部。

您能发布这个问题的实时演示吗？也许在，或者？只是好奇，但你知道你可以使用

，而不需要任何javascript，对吗？除非您需要更具体的选择，否则仅使用id有点不好。@Khez我想他想创建动画

很有用，但没有那么漂亮。@Khez:但我认为Niels希望

#id

元素始终位于屏幕顶部，即使

#id

实际上位于

的底部。这是正确的。我正在使用Khez建议的作为后备方案，但用了一些动画进行了预处理。他希望屏幕滚动到元素，如果我做对了，页面不够大。因此，他可以使用min height设置页面的最小高度，使页面变得足够大，可以将项目放在屏幕顶部。这是一个非常好的解决方案。对这个无关的div感到羞耻，但我更喜欢它，而不是停得很短的卷轴。@Niels：是的，这绝对是一个黑客行为，但至少它不是一个乱七八糟的行为。这是我能想到的最干净的东西，可以迫使身体足够高，可以正确地滚动。是的，我要用这个。非常感谢！