我有一个包含大量部分的文档,这些部分包含我需要根据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
。
我该如何阻止这种情况发生?
提前致谢。
答案 0 :(得分:0)
您的情况不正确。它应该是!=
。
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>
答案 1 :(得分:0)
我设法找到了解决问题的方法!
出于某种原因,时机搞得一团糟,导致$('body').scrollTop(0);
无法正常工作。
我可以通过添加10毫秒的延迟来修复它,然后再滚动到页面顶部。
$(document).ready(function(){
if(hash){
setTimeout( function(){
$('body').scrollTop(0);
}, 10 );
}
});
答案 2 :(得分:0)
如果页面中有id = hash的可见div,浏览器将跳转。防止这种情况的一种方法是在css中设置divs display = none,这样在页面加载期间它们就不可见,然后在
之后立即将它们更改为可见$(function() {
$('div').show();
});
或许您可能只希望一次显示一个部分..
$(function() {
$('#section-2').show();
});
另一种方法可能是让div显示,但立即滚动回到页面顶部
$(function() {
self.scrollTo(0, 0);
});
答案 3 :(得分:0)
我设法找到了解决问题的方法!
出于某种原因,时机搞得一团糟,导致$('body').scrollTop(0);
无法正常工作。
我可以通过添加10毫秒的延迟来修复它,然后再滚动到页面顶部。
$(document).ready(function(){
if(hash){
setTimeout( function(){
$('body').scrollTop(0);
}, 10 );
}
});