如何滚动并停留在特定元素所在的位置

Question

这是我的代码：

$('html, body').stop().animate({scrollTop:$('.select').offset().top-80}, '100'); 

div{
border: 2px solid gray;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div> div1 </div>
<br><br><br><br><br><br><br><br><br><br><br>
<div> div2 </div>
<br><br><br><br><br><br><br><br><br><br><br>
<div class='select'> div3 </div>
<br><br><br><br><br><br><br><br><br><br><br>
<div> div4 </div>
<br><br><br><br><br><br><br><br><br><br><br>
<div> div5 </div>

它工作正常。我的问题只是关于跳跃。加载页面时，首先它会跳到页面顶部，然后滚动到特定位置。如何预防？我不想先上后下，我想如果当前滚动在那个特定的位置，那么什么都不会发生。我该怎么做？

Answer 1

当文档（页面）被呈现时，默认情况下它总是将焦点放在页面的顶部，不幸的是css并没有单独提供任何技巧来设置它来克服它。

你能做的最好的事情就是在它周围使用setTimeout函数，并延迟转换，使其看起来更线性。

setTimeout(function(){
$('html, body').stop().animate({scrollTop:$('.select').offset().top-80}, 3000); },2000);

以下是一个示例：http://jsfiddle.net/86829ryz/18/

Answer 2

我认为您要求在页面加载时跳转到特定的<div>。。。如果是这种情况，最简单的解决方案是为目标<div>使用特定的ID，然后将该<div>的ID附加到用于链接到文件的URL的末尾。

因此，例如，如果您有<div id='select'>，那么您可以使用http://yourwebsite.com#select直接链接到该div，而不会产生滚动效果。

可以使用锚标签中的href属性（例如<a href='#select'>）直接进行到其他ID的其他跳跃。如果你想保持这种跳跃的滚动效果（而不是像这里那样在页面加载时自动滚动），你需要使用JavaScript或jQuery将事件监听器附加到锚标记上。