window.location.hash = " ";防止滚动到顶部？答案

【问题标题】：window.location.hash = " "; prevent scrolling to the top?window.location.hash = " ";防止滚动到顶部？
【发布时间】：2011-01-17 15:52:25
【问题描述】：

在我的网站中，我使用设置 url 地址

window.location.hash = 'project_name';

但是如果我想从任何哈希中清除地址 url（当我关闭项目时）并且我设置

window.location.hash = '';

页面会滚动到首页

有没有什么方法可以清理url而没有任何副作用？

谢谢

【问题讨论】：

您可以分配一个不存在的锚点，但这并不是真正“清理” URL：D

标签： javascript fragment-identifier

【解决方案1】：

有onhashchange 事件，但它不能在浏览器之间可靠地取消以防止滚动。最好的解决方案是在更改哈希位置之前记录滚动位置并在之后重置它。例如，以下代码将捕获对任何链接（不会停止传播）的点击，其 href 值为 #，并防止页面垂直滚动：

document.onclick = function (evt) {
    var tgt = (evt && evt.target) || event.srcElement,
        scr = document.body.scrollTop;

    if (tgt.tagName == "A" && tgt.href.slice(-1) == "#") {
        window.location.href = "#";
        document.body.scrollTop = scr;           
        return false;
    }
}

如果您通过脚本更改哈希，可以使用以下代码：

var scr = document.body.scrollTop;
window.location.href = '#';
document.body.scrollTop = scr;

可以调整这些方法中的任何一种，以避免滚动单个元素或水平滚动页面。请注意，通过调用pushState 或replaceState 函数，您可以 remove the entire hash（包括#）在现代浏览器中不会导致导航或滚动。

【讨论】：

您也可以使用id 在scrollTop 处临时创建另一个元素。
fyi，它在 Firefox 中不起作用，而且大部分时间在 Chrome 中。它进入了 ohhashchange 函数，但浏览器仍然滚动（也尝试阻止默认）。
@JCarter：你说得对，我已经删除了那部分。我答案的另一部分可能是最好的解决方案，我已经改进了。谢谢:-)
看看this answer，解决了我的问题。
在 2019 年，这种技术似乎不适用于 Chrome

【解决方案2】：

我遇到了同样的问题，来这里寻求答案。刚刚发现有一个非常简单的方法：

window.location.hash = ' ';

基本上你将它设置为'#'，因为空间不存在，它不会移动。当您重新访问该页面时，它的处理方式也与 #

【讨论】：

在我看来，这应该是公认的问题

【解决方案3】：

首先，感谢您的解决方案 - @Andy-E 和 @JustMaier。

但是，根据 Andy E 在 Firefox 中的第二个代码块和 JustMaier 在 chrome 中的代码，我无法让它工作。

所以我对这两个代码块进行了混搭，它在两种浏览器上都可以正常工作

var scr = document.body.scrollTop;

window.location.hash = ' ';

document.body.scrollTop = scr;

我的两分钱，没有从上面提到的真正的 JS 忍者身上拿走。 :)

【讨论】：

【解决方案4】：

document.body.scrollTop is deprecated，最新的 Chrome 版本在这里似乎不稳定。以下应该有效：

  var topPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  window.location.href = '#';
  document.documentElement.scrollTop = topPos;

【讨论】：