jQuery - 从更改页面位置停止网址定位点

Question

我有一个带有一些部分的文档，其中包含需要根据URL定位点收集的信息。

的什么，我试图做例子：

URL

http://mywebsite.com/page.php#section-2

HTML

<div id='information'>Data should be here!</div> 

<div id='section-1'>This is data from section 1!</div> 

<div id='section-2'>This is data from section 2!</div> 

<div id='section-3'>This is data from section 3!</div> 

<div id='section-4'>This is data from section 4!</div> 

CSS

div{ 
    height: 500px; 
} 

jQuery的

var hash = window.location.hash; 
if(!hash == ""){ 
    var data = $(hash).text(); 
    $("#information").text(data); 
} 

但是当我加载URL，jQuery的工作正常，但页面跳转到#section-2。
如何阻止这种情况发生？

在此先感谢。

Answer 1

的顶部，我设法找到一种方法来解决它！
出于某种原因，时机搞砸了，并导致$('body').scrollTop(0);不起作用。

我可以通过在滚动到页面顶部之前添加10毫秒的延迟来修复它。

$(document).ready(function(){ 
    if(hash){ 
    setTimeout(function(){ 
     $('body').scrollTop(0); 
    }, 10); 
    } 
}); 

Answer 2

您的状况不正确。应该是!=。

if(hash != ""){ 
    var data = $(hash).text(); 
    $("#information").text(data); 
} 

而为了防止跳跃，您可以尝试使用scrollTop()。

$(document).ready(function(){ 
 
    var hash = window.location.hash; 
 
    if(hash){ 
 
    $('body').scrollTop(0); 
 
    } 
 
});

div{ 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id='information'>Data should be here!</div> 
 

 
<div id='section-1'>This is data from section 1!</div> 
 

 
<div id='section-2'>This is data from section 2!</div> 
 

 
<div id='section-3'>This is data from section 3!</div> 
 

 
<div id='section-4'>This is data from section 4!</div>

Answer 3

我设法找到一种方法来解决它！
出于某种原因，时机搞砸了，并导致$('body').scrollTop(0);不起作用。

我可以通过在滚动到页面顶部之前添加10毫秒的延迟来修复它。

$(document).ready(function(){ 
    if(hash){ 
    setTimeout(function(){ 
     $('body').scrollTop(0); 
    }, 10); 
    } 
}); 

Answer 4

如果页面中存在id = hash的可见div，浏览器将跳转。防止这种情况的一种方法是设置你的div显示=无在CSS所以它们不是页面加载时可见，然后将它们变为可见

$(function() { 
    $('div').show(); 
}); 

后立即或者你可能只想显示在一个部分一时间..

$(function() { 
    $('#section-2').show(); 
}); 

另一种可能是留下明显的div但马上回滚动到页面

$(function() { 
    self.scrollTo(0, 0); 
});