javascript - 当我刷新单页网站时,它没有首先显示标题

标签 javascript html css

所以问题是刷​​新网站后,网站的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/

相关文章:

javascript - FB.Event.subscribe 不起作用

javascript - 使用 Maven(或其他构建工具)创建 Web2.0 应用程序

javascript - 获取包含该函数的匿名变量的名称

javascript - Uncaught Error : Parse Error: Line 13: Unexpected identifier

html - 如果标签内部有跨度,则复选框会自动取消选中

javascript - 收到错误 : Failed to execute 'appendChild' on 'Node' : parameter 1 is not of type 'Node'

python - Flask-Bootstrap、flask-wtf、添加类以提交按钮

javascript - 如何切换所有div标签

html - 'glyphicon glyphicon-plus' 不显示

html - 如何在垂直网站中使 div 部分响应