当刷新网站时，它停留在#链接中，不会返回到主# HTML

Question

因此，我有一个网站，它有一个按钮，按钮发送到第2节，然后当我刷新网站，它停留在第2节，但我希望它去到主要部分，请帮助我！祝您今天愉快。

<section class="Hero" id="#sec-1">
   <div class="container">
      <div class="Name">
         <h1 class="logo">Darius Rücker</h1>
         <div class="Slogan">
            <H4 class="textSlogan">Think. Contact. <span class="Mark">Create.</span> </H4>
         </div>
      </div>
      <a href="#sec-2">
         <div class="scroll-down"></div>
      </a>
   </div>
   <div class="container">
      <div class="Neon">
         <span class="textoNeon">hola</span>
      </div>
   </div>
</section>
<section class="next" id="sec-2">
   <h1>HEY</h1>
</section>

.scroll-down {
    height: 50px;
    width: 30px;
    border: 2px solid black;
    position: absolute;
    left: 50%;
    bottom: 20px;
    border-radius: 50px;
    cursor: pointer;
  
}

Answer 1

您可以在用户单击锚标记之后立即从url中删除id。

history.scrollRestoration = "manual"将在刷新时将滚动框设置为页面顶部。

<a onclick="removeAnchorFormURL()" href="#sec-2">here</a>

<script>
  history.scrollRestoration = "manual";

  const removeAnchorFormURL = () => {
    setTimeout(() => {
      window.history.replaceState({}, "", window.location.href.split("#")[0]);
    }, 100);
  };
</script>

window.location文档

location.href文档

location.replace文档

scrollRestoration文档 (查看有关scrollRestoration兼容性的信息)