我在页面上有一些选项卡式内容，URL 中的哈希段可将您带到正确的选项卡内容。没什么不寻常的。但是，由于选项卡位于页面下方的一小段距离，当有人在 URL 中使用哈希目标进行访问时，他们会被下拉到页面下方的选项卡位 - 这会切断顶部导航栏和面包屑。
我不希望这种情况发生。这是迷失方向。
我认为纠正很简单：例如：
$(function(){
window.scrollTo(0,0)
});
那行不通。您仍然会被丢弃在哈希锚上。
我试过在 window.load() 上调用它。我尝试将脚本从 < head > 移动到 . 我试过 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>
浏览器将在某些条件下滚动（主题标签、按 F5 时恢复之前的滚动状态、聚焦元素或调用scrollIntoView）。在所有这些情况下都不会触发滚动事件。
不幸的是，我还没有找到任何可靠的方法来避免这种情况。
首先，我建议你监视窗口上的滚动事件，看看是否可以取消该事件。
如果它不起作用，我看不到任何解决方案，只能将锚点移动到顶部，或者只是将其删除。
| 归档时间： |
|
| 查看次数： |
9895 次 |
| 最近记录： |