javascript - window.location.hash = " "; 防止滚动到顶部？

Question

在我的网站中，我使用

window.location.hash = 'project_name';

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

window.location.hash = '';

它发生页面滚动到首页

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

谢谢

Answer 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;

可以调整这些方法中的任何一种以避免滚动单个元素或水平滚动页面。请注意，您可以 通过调用or函数来删除整个哈希（包括#），而不会在现代浏览器中导致导航或滚动。pushStatereplaceState

Answer 2

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

window.location.hash = ' ';

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

Answer 3

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

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

所以我做了这两个代码块的混搭，它在两个浏览器上都按预期工作

var scr = document.body.scrollTop;

window.location.hash = ' ';

document.body.scrollTop = scr;

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

Answer 4

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

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