在 Firefox 中加载时，我的网页正在向下滚动答案

【问题标题】：My webbpage is scrolling down when loaded in firefox在 Firefox 中加载时，我的网页正在向下滚动
【发布时间】：2021-08-15 04:33:23
【问题描述】：

我刚开始从头开始构建一个网站，并在 Firefox 中遇到了一个奇怪的错误，它会将页面向下滚动到第一个 div 并跳过其页边距。
我不要求修复 Firefox。我只是寻求帮助以找到解决方法。
我已经尝试使用 javascript 将所有可能的滚动值设置为 0，但没有成功。我认为问题是由我奇怪的 div 星座造成的，但我不确定如何准确以及如何解决它（显然）。
为了复制，我使用的是 firefox 88.01（最新的 26.05.21）

HTML：

<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Demo - Start</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="assets.css">
    <script>
        window.onload = function () {
            load();
        }
        window.onresize = function () {
            resize();

        }
        function resize() {
            document.getElementById("foreground").style.height = window.innerHeight - document.getElementById("titlebar").offsetHeight + "px";
            document.getElementById("foreground").style.top = document.getElementById("titlebar").offsetHeight + "px";
            document.getElementById("background").style.top = document.getElementById("titlebar").offsetHeight + "px";
            document.getElementById("titlebar").style.paddingLeft = ((document.getElementById("body").offsetWidth - (document.getElementById("title_element_1").offsetWidth + document.getElementById("title_element_2").offsetWidth + document.getElementById("title_element_3").offsetWidth + document.getElementById("title_element_4").offsetWidth)) / 2 + "px");
        }
        function load() {
            resize();
        }

    </script>
</head>

<body id="body">
    <div id="titlebar">
        <a id="title_element_1" class="active" href="#start">Start</a>
        <a id="title_element_2" href="#tour">Tour</a>
        <a id="title_element_3" href="#details">Details</a>
        <a id="title_element_4" href="#darkmode">Darkmode</a>
    </div>

    <div id="foreground">
        <div id="start" class="content">
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
        </div>

        <div class="content">
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
        </div>

        <div id="end" class="content">
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
            <p>Demo text . . .</p>
        </div>
        <div style="height: 100px;">

        </div>

    </div>
    <img id="background" src="background.png" alt="Background">
</body>

</html>

CSS：

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: gray;
}
#titlebar {
    background-color: #333;
    overflow: hidden;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 99;
    box-shadow: 0px 2px 6px 6px rgba(0, 0, 0, 0.3);
}
#titlebar a {
    color: #f2f2f2;
    float: left;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
}
#titlebar a:hover {
    background-color: lightgrey;
    color: black;        
}
#titlebar a.active {
    background-color: grey;
    color: black;  
}
#titlebar a.active:hover {
    background-color: lightgrey;
    color: black; 
}
#background {
    z-index: 0;
    position: fixed;
    width: 100%;
}
#foreground {
    z-index: 1;
    position:fixed;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scrollbar-color: #555555 #333;  
}
.content {
    padding: 50px;
    display: block;
    overflow: auto;
    margin-top:100px;
    margin-left:20%;
    margin-right: 20%;
    background-color: rgba(51,51,51,0.9);
    color: #f2f2f2;
}
#start {
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
}
#end {
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

【问题讨论】：

这不会发生在我身上。你确定你不在whatever.html#start？
其实你是对的。为什么在带有 # 的网站上会发生这种情况？
在这种情况下，它告诉浏览器跳转到带有id="start" 的元素（或 <a name="start">，但那太老派了，没有人再提到它了）。它称为 hash，可用于在同一文档中导航。您还可以读取哈希值并监听来自 JS 的哈希更改以创建单页应用程序之类的东西。

标签： javascript html css firefox

【解决方案1】：

我将开始和结束 ID 更改为内容的子类，出于某种原因，它修复了它。我将关闭问题。

【讨论】：