Question

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

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

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

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

Answer 1

在#content更改内滚动元素的偏移量时看起来像。这就是目标元素的顶部偏移在已经在视图中时为零的原因。要为scrollTop获取正确的值，您必须将当前值scrollTop添加到偏移量中。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这可能会有所帮助，我通常会在我的网站中使用这个简单的javascript片段进行scrolltotop / backtotop功能。

<强> HTML

<body id="top">

<a href="#top" onclick="scrollToTop();return false">Back to Top &uarr;</a>

的 JS

<script> var timeOut; function scrollToTop() { if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){ window.scrollBy(0,-50); timeOut=setTimeout('scrollToTop()',10); } else clearTimeout(timeOut); } </script>

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

2 个答案: