jQuery - 停止url锚点改变页面位置

时间:2014-12-07 08:55:55

标签: javascript jquery html css

我有一个包含大量部分的文档,这些部分包含我需要根据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
我该如何阻止这种情况发生?

提前致谢。

4 个答案:

答案 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 );
  }
});