我在页面上有一些选项卡式内容，URL 中有散列段，可将您带到正确的选项卡内容。没有什么不寻常的。但是，由于选项卡位于页面下方很短的位置，因此当有人在 URL 中使用哈希目标访问时，他们会被放到页面下方的选项卡位 - 这会切断顶部导航栏和面包屑。
我不希望这种情况发生。这让人迷失方向。
我认为纠正起来很简单:类似于:
$(function(){
window.scrollTo(0,0)
});
那是行不通的。您仍然会被丢弃在哈希 anchor 处。
我试过在 window.load() 上调用它。我尝试将脚本从 移动到 .我试过 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>
最佳答案
浏览器会在特定条件下滚动(标签、在执行 F5 时恢复之前的滚动状态、聚焦元素或调用 scrollIntoView)。在所有这些情况下都不会触发滚动事件。
不幸的是，我还没有找到任何可靠的方法来避免这种情况。
首先，建议你监听window上的滚动事件，看看能不能取消这个事件。
如果它不起作用，我认为没有解决方案，只能将您的 anchor 移到顶部，或者只是移除它们。
关于javascript - 为什么 window.scrollTo() 在页面加载时不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14213070/