HTML - 页面随机打开滚动点

Question

我创建了一个网页并发现了奇怪的问题。 当我尝试从主页进入子页面时，出现子页面，但是向下滚动。它可能会出现在顶部，它在电脑上确实 - 但在手机上不是。
有一个代码：

HTML（从主体部分）：

<div id="top"><a href="some_link">Go to main</a></div> 
<div id="title" class="slide"> 
    <div class="content"> 
    <div class="space"> 
     <span class="centerer"></span> 
     <span class="centered"><h1>Some centered stuff there</h1></span> 
    </div> 
    <div id="changelog_btn"> 
     <a href="#changelog"> 
     <span class="centerer"></span> 
     <span class="centered">Changelog</span> 
     </a> 
    </div> 
    <div id="dl_btn"> 
     <a href="#download"> 
     <span class="centerer"></span> 
     <span class="centered">Download</span> 
     </a> 
    </div> 
    <div class="space"></div> 
    </div> 
</div> 
<div id="changelog" class="slide"> 
    <div class="content"> 
    <div class="space"> 
     <span class="centerer"></span> 
     <span class="centered"><h1>Changelog</h1><div class="up_btn"><a href="#top">(Top)</a></div></span> 
    </div> 
    <textarea readonly autofocus> 
Some changelog stuff 
    </textarea> 
    </div> 
    <div class="space"></div> 
</div> 
<div id="download"> 
    <div id="content" class="slide"> 
    <div class="space"> 
     <span class="centerer"></span> 
     <span class="centered"><h1>Download</h1><div class="up_btn"><a href="#top">(Top)</a></div></span> 
    </div> 
    Header<br> 
    <div id="dl_btn"> 
     <a href="file.link" download> 
     <span class="centerer"></span> 
     <span class="centered">Download file</span> 
     </a> 
    </div> 
    <div class="space"></div> 
    </div> 
</div> 

CSS

@media only screen 
and (min-device-width: 240px) { 
html { 
    font-family: 'AtomicAge'; 
    overflow-x: hidden; 
    background-attachment: fixed; 
} 
body { 
    margin: 0; 
    padding: 0; 
    background-attachment: fixed; 
} 
h1 { 
    margin: auto; 
} 
.space { 
    height: 25%; 
    display: block; 
    vertical-align: middle; 
} 
.slide { 
    width: 100vw; 
    height: 100vh; 
    text-align: center; 
    z-index: -1; 
    box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); 
} 

#changelog_btn a, #dl_btn a { 
    display: inline-block; 
    vertical-align: top; 
    width: 20%; 
    height: 5%; 
    border: 1px solid; 
    margin: 15px auto; 
} 

#changelog_btn a, #dl_btn a { 
    text-decoration: none; 
    color: black; 
    transition: all 0.5s ease; 
} 
#changelog_btn a:hover, #dl_btn a:hover { 
    background-color: white; 
} 
textarea { 
    width: 80%; 
    height: 50%; 
} 
.centered, .centerer { 
    vertical-align: middle; 
    display: inline-block; 
} 
.centerer { 
    height: 100%; 
} 
.up_btn a { 
    text-decoration: none; 
    color: black; 
    transition: all 0.5s ease; 
} 
.up_btn a:hover { 
    color: white; 
} 
#title { 
    background-image: url("_images/bg1.jpg"); 
    background-attachment: fixed; 
    background-size: cover; 
} 
#changelog:before, #changelog { 
    background-image: url("_images/bg2.jpg"); 
    background-attachment: fixed; 
    background-size: cover; 
} 
#download { 
    background-image: url("_images/bg3.jpg"); 
    background-attachment: fixed; 
    background-size: cover; 
} 
#top a { 
    display: inline-block; 
    width: 100%; 
    text-align: center; 
    color: white; 
    background-color: black; 
    text-decoration: none; 
    transition: all 0.5s ease; 
} 
#top a:hover { 
    color: black; 
    background-color: white; 
} 
} 
@media only screen 
and (max-width: 1080px) { 
    * { 
    margin: 0; 
    padding: 0; 
    background-attachment: fixed; 
    } 
} 

有什么我可以纠正？

Answer 1

您已经应用到文本区:)

Answer 2

它似乎也略微向下滚动到电脑上（至少在我的屏幕上）。我同意这个问题很奇怪。我会建议在页面底部插入下面的JavaScript：

<script> 
    window.onload = function() {window.scrollTo(0,0)}; 
</script>