从 URL 和历史记录中删除锚点

Question

我刚刚用一个简单的 <a href='#top'...

向我的博客添加了一个返回顶部按钮

我遇到了在其他网站的返回顶部按钮中看不到的恼人行为：

#top 后缀添加到 URL - 我得到了这个，但我想改变它，这样它就不会影响原来的 URL.
一旦我点击该按钮并返回到页面顶部，随后按下后退按钮 (alt+left) 将我带到同一页面中我点击返回顶部的位置按钮 - 这是一个我根本不明白的按钮。如何防止此条目进入历史记录？

我试图将这里建议的代码 - - 放在我的 head 标签中，但它没有效果。

编辑：我在这里添加另一个要求 - 我想仅针对该按钮禁用上述行为。将来我可能会在这里和那里使用锚点，我希望原始行为能够发生。这是可能的还是必须全部阻止或全部允许？

Answer 1

Window.scroll() 方法应该适合您。

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

window.scroll() 方法对 url 没有任何影响。它只是告诉 window，滚动到特定坐标（上：y，左：x）

不使用锚标记，而是向按钮添加一个 eventListener，它会触发 Window.scroll()

button.addEventListener("click", function () {
  window.scroll({
  top: 0,
  left: 0,
  behavior: 'smooth'
  });
});

你可以计算你的 window.scroll()-target 相对于 body 元素的准确位置：

const bodyRect = document.body.getBoundingClientRect(),
      elemRect = element.getBoundingClientRect(),
      offset   = elemRect.top - bodyRect.top;

然后将计算出的偏移量用于 window.scroll()

中的最高值

window.scroll({
  top: offset,
  left: 0,
  behavior: 'smooth'
});

从 URL 和历史记录中删除锚点

Remove anchor from URL and history

javascript

url

anchor