javascript - 使用 jQuery 滚动到 div

Question

我的网站在页面下方播放了博客文章...在右上角，我有导航，可以选择跳转到 9 月份的最后一篇文章。我知道包含这篇文章的 div 的 id 是 #post2，因此我尝试使用 jQuery 将页面滚动到该 div，如下所示:

$("html, body").animate(
    { scrollTop: $("#post2").offset().top },
500);

我可能做错了什么？

Answer 1

您可以使用window.scrollTo函数，通过计算相应的坐标，但如果您使用 jQuery，则有开箱即用的插件，支持平滑滚动，例如 jquery.scrollTo .

这里是演示它的代码片段:

$(function(){
  $('#btn').click(function(){
    $.scrollTo('#post2', 800 );
  });
});

div {
  width: 200px;  
}

#large {
  height: 1500px;
  background-color: grey;
}

#post2 {
  height: 100px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js?1.4.11"></script>

<button id="btn">scroll</button>

<div id="large"></div>
<div id="post2"></div>

在您的情况下，您需要将 overflow: hide; 添加到 UIPostContainer 类，因为您无法滚动到没有高度的元素。因为你有一个大约 50px 高度的固定标题，它覆盖了你也必须考虑到的所有内容，例如像这样: $.scrollTo("#post2 h4", 800, {offset: {top:-55} });