Question

我正在使用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根据视口的高度添加更多填充？我是否使用某种溢出技巧？

Answer 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>将与浏览器的视口具有相同的高度，这个额外的高度将让您始终滚动您的元素就在视口的顶部。

Answer 2

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

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

<强>更新

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

Jquery滚动停止页面底部

2 个答案: