javascript - Jquery 滚动到 ID 或 anchor - 如果已经存在则滚动到顶部？

Question

我一直在努力寻找原因和/或解决方案。我一直在用

$("#content").animate({scrollTop:$(#elementId).offset().top-183}, 600);

平滑滚动到 <div> 中的 ID . 183 是一个偏移量，所以我的元素在顶部。它可以工作，但是如果我已经在那里时再次单击它，它会向上滚动到顶部。如果我在元素下方单击它，它将无法正常工作。它只有在我位于元素上方时才能正常工作。

“scrolltop”在所有情况下都不是正确的 jQuery 例程吗？或者我是否需要确定该元素是在我上方还是下方并相应地使用不同的命令？似乎没有太多关于这种行为的文档，我只发现有几个人提到过它。也许我错过了解决这个问题的简单方法？我会尝试制作一个 JSfiddle 来说明这种行为，但我想也许这里有人以前见过这种情况并且有解决方法的提示？

Answer 1

当您滚动 #content 中元素的偏移量时，它看起来会发生变化。 这就是为什么目标元素已经在 View 中时其顶部偏移量为零的原因。要获得 scrollTop 的正确值，您必须将 scrollTop 的当前值添加到偏移量。

$('#scroll').click(function() {
  $("#content").animate({scrollTop:$("#content").scrollTop() + $('#target').offset().top-10}, 600);
});

#content {
  max-height: 100px;
  overflow: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content">
  
  <pre>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget elementum lorem, sed commodo erat. 
  Maecenas a egestas lectus. Sed hendrerit ut quam id rhoncus. In iaculis dapibus nulla, ut iaculis metus 
  varius at. Nullam eleifend felis lacus, eget viverra elit pellentesque volutpat. Vestibulum ante ipsum 
  primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ultrices, arcu pretium hendrerit
  laoreet, ante nunc mollis orci, in egestas eros risus eget libero. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada fames ac turpis egestas. Praesent dictum elit tortor, a tincidunt dolor 
  elementum at. Integer ullamcorper mauris id enim facilisis finibus. Etiam elementum lacus urna, ut 
  consectetur lorem tincidunt at. Suspendisse ac finibus sapien.
  </pre>
  
  <div id="target">
    Hello, World!
  </div>
  
  <pre>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget elementum lorem, sed commodo erat. 
  Maecenas a egestas lectus. Sed hendrerit ut quam id rhoncus. In iaculis dapibus nulla, ut iaculis metus 
  varius at. Nullam eleifend felis lacus, eget viverra elit pellentesque volutpat. Vestibulum ante ipsum 
  primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ultrices, arcu pretium hendrerit
  laoreet, ante nunc mollis orci, in egestas eros risus eget libero. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada fames ac turpis egestas. Praesent dictum elit tortor, a tincidunt dolor 
  elementum at. Integer ullamcorper mauris id enim facilisis finibus. Etiam elementum lacus urna, ut 
  consectetur lorem tincidunt at. Suspendisse ac finibus sapien.
  </pre>

</div>
<button id="scroll">Scroll to #target</button>