5

我在页面上有一些选项卡式内容，URL 中有散列段，可将您带到正确的选项卡内容。没有什么不寻常的。但是，由于选项卡位于页面下方很短的位置，因此当有人在 URL 中使用哈希目标访问时，他们会被放到页面下方的选项卡位 - 这会切断顶部导航栏和面包屑。

我不希望这种情况发生。这让人迷失方向。

我认为纠正起来很简单：类似于：

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

那是行不通的。您仍然会被丢弃在哈希锚点处。

我试过在 window.load() 上调用它。我尝试将脚本从 <head> 移动到 . 我试过 window.scrollTo 和 window.scroll。没有任何效果。我能够真正将我移回页面顶部的唯一脚本是：

$(function(){
    setTimeout(function(){
        window.scrollTo(0,0)
    },2000);
});

...这比根本不滚动还要糟糕。

为什么别的什么都行不通？我做错了什么，还是有其他什么阻止我将用户移回页面顶部？

====================== 编辑：

一个例子（你可能想用更多的 Lorem paras 来填充它）。将其保存到一个新的 HTML 文件，然后转到 #hash1 URL：

<!doctype html>
<html lang="en">

<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>Load</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
/*


// doesn't work
$(function(){
    window.scrollTo(0,0);
});


// doesn't work
$(window).on('load', function(){
    window.scrollTo(0,0);
});


// doesn't work
window.scrollTo(0,0);


// works, but horrible UX.
$(function(){
    setTimeout(function(){
        window.scrollTo(0,0)
    },2000);
});



*/
</script>

</head>

<body>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p><a name="hash1"></a>Hash 1</p>


<script type="text/javascript">
    // doesn't work
    // window.scrollTo(0,0);
</script>

</body>

</html>
4

2 回答 2

2

browsers will scroll on certains conditions (hashtags, restoring the previous scroll state when doing F5, focusing elements or calling scrollIntoView). Scroll events won't be fired in all these cases.

Unfortunately, I haven't found any reliable way to avoid this.

First, I suggest you monitor scroll events on window, and see if you can cancel the event.

If it doesn't work, I see no solution but to move your anchors to the top, or just remove them.

于 2013-01-08T10:48:05.903 回答
0

-> 你的 jquery 函数很可能不会被调用 onLoad 可以发布一个简单的代码示例 -> 使用 javascript 而不是 jquery 这个函数滚动到 html 文件加载的指定位置。

<html>
<head>
  <script>
  function windowscroll(yscroll,scrollspeed){
  //alert('hi');
  window.scrollBy(0,-9000);//initial scroll to the top of the page
  for (var iscroll=0;iscroll<yscroll;iscroll++){
    setTimeout('window.scrollBy(0,' + iscroll + ')',scrollspeed*iscroll);
  }
  }
  </script>
  </head>
  <body onLoad="windowscroll(0,0)">
  <div>
  Click here</div>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <br/><br/><br/>asdasd asdasf sdfgsdf<br/><br/><br/><br/>
 <br/><br/><br/><br/><br/><br/>zxd<br/><br/><br/><br/><br/>

 zxc dsf sdf asdf
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <br/><br/><br/><br/><br/><br/>
 <br/>dasfsdf<br/><br/>
 </body>
</html>
于 2013-01-08T11:09:02.973 回答