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>如您所见，我从菜单链接中抓取目标元素的href (#id)并滚动到目标元素。
但问题在于，我的目标元素直接转到页面的底部，当页面滚动到最后时，该元素的顶部无法滚动到页面的顶部，因为底部没有足够的页面……我说的有道理吗？
我正在尝试使用css或jquery找出一个解决方案，这意味着无论页面的高度如何(或底部的填充/边距)，当单击菜单项时，元素都将位于视图的顶部。
我是否要使用javascript根据视口的高度添加更多的填充？我是不是使用了某种溢出技巧？
回答 2
Stack Overflow用户
发布于 2011-04-15 10:58:24
你的问题是页面没有你想要的那么高。如果您尝试转到#x，而#x在<body>的底部，那么您将滚动到页面的底部，当您想要#x位于顶部时，它将位于窗口的底部。
我认为你唯一的选择就是强迫<body>变高。如下所示：
$(document).ready(function() {
viewport_height = $(window).height();
$height_hack = $('<div> </div>').height(viewport_height);
$('body').append($height_hack);
});类似这样的操作将在内容的底部附加一个(视觉上)空的<div>，这个额外的<div>将具有与浏览器的视区相同的高度，并且这个额外的高度将允许您始终将元素滚动到视区的顶部。
Stack Overflow用户
发布于 2011-04-15 10:43:00
我认为你可以做很多事情来解决这个问题，但是我会使用CSS min-height Property to body。我相信这更多的是个人的答案，所以你可以做任何你想做的事情，就像你说的，添加填充，边距……
但我会设置一个最小高度，使屏幕可以滚动到您想要的项目。
更新
嗯，好吧。我没有考虑动态内容。如果内容变得更大，身体的最小高度可能解决不了问题。
https://stackoverflow.com/questions/5671612
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号