Question

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

我不希望这种情况发生。这令人迷惑。

我认为纠正很简单：例如：

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

这不起作用。你仍然会被哈希锚点放弃。

我试过在window.load（）上调用它。我试过从＆lt;头＆gt;就在之前。我试过window.scrollTo和window.scroll。什么都行不通。我能够让我回到页面顶部的唯一脚本是：

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

......甚至比完全不滚动更糟糕。

为什么其他任何东西都不起作用？我做错了什么，还是其他阻止我将用户移回页面顶部的东西？

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

一个例子（你可能想用更多的Lorem段来填充它）。将其保存到新的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>

Answer 1

浏览器将滚动某些条件（hashtags，在执行F5时恢复先前的滚动状态，聚焦元素或调用scrollIntoView）。在所有这些情况下都不会触发滚动事件。

不幸的是，我没有找到任何可靠的方法来避免这种情况。

首先，我建议您监控窗口上的滚动事件，看看是否可以取消该事件。

如果它不起作用，我看不到任何解决方案，只是将你的锚点移到顶部，或者只是删除它们。

Answer 2

- ＆gt;您的jquery函数很可能不会被调用onLoad可以发布一个简单的代码示例 - ＆GT;使用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>

为什么window.scrollTo（）不能在页面加载时工作？

2 个答案: