所以问题是刷新网站后,网站的header没有先显示出来。它引导我到联系部分(向下)而不是标题。有没有人遇到同样的问题以及如何解决?请注意,我有一个单页网站,您只能上下滚动。
最佳答案
这里有两个问题。我不知道它可能是哪个,因为你没有提供太多信息。
原因 #1:HTML anchor 链接
如果您的标题有一个 ID,例如 <h1 id="myinfo">Contact</h1>
URL 类似于 example.com/index.html#myinfo
浏览器将自动滚动到 myinfo
的 anchor
原因 #2:
当您刷新几乎任何网站时,浏览器都会记住您所在页面的先前位置。如果您在“联系人”部分,请刷新页面。它会滚动回到相同的位置。
可能的修复:
如果你想强制页面回到顶部,无论是使用刷新还是 anchor 。尝试将此脚本放在收盘前 BODY
标记或在 HEAD
部分:
<script type="text/javascript">
window.onload = function() {
window.setTimeout(
function() { window.scrollTo(0,0); },
10
);
};
</script>
window.setTimeout
很重要,因为页面在顶部刷新然后滚动离开。我们需要延迟该功能,以便在浏览器完成后滚动。
希望这能以某种方式有所帮助。
编辑:2018 年 11 月 16 日
这里唯一的问题是您是否需要 HTML anchor 链接跳转到页面上的不同位置。 anchor 链接将被完全忽略。
如果您禁用 JavaScript,我们的代码将根本无法运行。您可以使用上面的脚本在内容加载之前隐藏页面,然后在页面加载后显示它,但这会导致页面暂时变白。几年前 Google 曾经这样做过,所以没有人可以看到页面加载中的元素。
这个脚本需要放在BODY
之后标签但在主要内容之前。如果它在 HEAD
中,它将不起作用.
<body>
<script type="text/javascript">
<!--
document.body.style.display = "none";
// If onbeforeunload fails
window.onload = function() {
window.setTimeout(
function() {
window.scrollTo(0,0);
document.body.style.display = "inherit";
},
0
);
};
/* This should scroll the page to the top before the page refreshes */
window.onbeforeunload = function() { window.scrollTo(0,0); }
//-->
</script>
. . . { Your content here } . . .
如果禁用 JavaScript,则此解决方案将不起作用。有些人确实禁用了 JavaScript。
抱歉,没有其他方法可以强制页面置顶。
关于javascript - 当我刷新单页网站时,它没有首先显示标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53319652/