单击锚点后如何刷新页面并加载到顶部，忽略锚点并重置回顶部？

Posted 2023-02-22

【中文标题】单击锚点后如何刷新页面并加载到顶部，忽略锚点并重置回顶部？

【英文标题】：How to refresh a page and load at top after an anchor has been clicked, ignoring the anchor, and resetting back to the top?

【发布时间】：2019-09-28 17:45:31

【问题描述】：

我有一个带有几个锚点的页面。当用户点击锚点时，锚点会起作用，用户会被带到正确的位置。

如果用户尝试刷新页面，它会在 URL 窗口中保留锚点 ID，因此刷新时自然不会回到页面顶部。

我认为在刷新时返回页面顶部会更加用户友好。

我将如何实现这一目标？

我的页面目前主要使用 bootstrap、css、jquery、javascript 和 php。

我想我需要设置一些代码，以便在单击锚点后，它会从 url 窗口中删除锚点，这样如果有人刷新，他们只会刷新没有锚点的初始页面状态，但我不知道如何开始。或者，也许我想太多了，有一些方法可以在刷新时始终转到页面顶部，而不管锚点与否。我不太精通代码。

现在我的代码是这样的......

我的一个锚的例子：

<a class="hoverlink" href="#firefighter"><li style="float:left; margin-right:1em; color:white; background-color:red" class="appao-btn nav-btn">Fire Fighter</li></a>

锚点将跳转到的元素之一：

<div style="min-height:10px;" name="firefighter" id="firefighter" class="anchor"><p style="min-height: 10px;">&nbsp;</p></div>

我的锚点上的 CSS 样式：

.anchor:target  height:200px; display: block; margin-top:-2em; visibility: hidden;

我的代码的实际结果：页面刷新停留在锚点位置

期望的结果：页面刷新到页面顶部

---

经过一番搜索，我找到了一个几乎适合我的解决方案：

<script>
window.onbeforeunload = function () 
  window.scrollTo(0, 0);

</script>

但它会产生一种看起来不是最好的闪烁效果，例如我的示例网站

https://graceindustries.com/gracetest/Grace%20Industries%20Website%20Design%202019%20Alternate%20Version/documentation.html

有人知道如何去除“闪烁”吗？

【参考方案1】：

你可以试试这个（.some-anchor 是指向页面内某些目的地的所有标签的类）。

$('.some-anchor').click(function() 
    var target = $(this).attr("href");
    $('html, body').animate(
        scrollTop: $("" + target).offset().top
    , 1000);
    return false;
  );

"return false;"或preventDefault() 事件方法将防止页面闪烁。正如我所观察到的，这不会使 URL 的 # 如此刷新不是问题。

其他有用的回答：jQuery flicker when using animate-scrollTo

【参考方案2】：

在锚标记中使用URL Fragments (#someLink) 导航到页面内容是HTML specification 的核心部分。大多数（如果不是全部）Web 浏览器的标准实现是将片段添加到地址栏。片段是 URL 的一部分，因此，当页面刷新时，浏览器会滚动到具有该 ID 的元素。大多数用户都会熟悉这种行为，即使他们不明白它是如何或为什么会这样工作的。因此，我建议不要解决此问题。

但是，如果绝对必要，实现您正在寻找的结果的唯一方法是不使用 URL 片段进行导航，而是使用 JavaScript，因此首先不要将片段放在 URL 中。看起来 Element.scrollIntoView() 方法可能会满足您的需求。而不是拥有 <a href="#element1">Click me</a> 你会用 <a onclick="document.getElementById('element1').scrollIntoView();">Click me</a> 甚至更好的是，在外部 JS 文件中实现它。如果您因为元素没有href 属性而遇到问题，您可以随时添加一个空片段href="#"。

【参考方案3】：

您可以在用户单击锚标记后立即从 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 docs

location.href docs

location.replace docs

scrollRestoration docs（查看有关 scrollRestoration 兼容性的信息）