Question

在我的网站中，我使用

设置了网址

window.location.hash = 'project_name';

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

window.location.hash = '';

它发生在页面滚动到首页

有没有办法清理网址而没有任何副作用？

感谢

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;

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

Answer 2

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

但是，基于Andy E在Firefox中的第二个代码块和在Chrome中使用JustMaier的代码，我遇到了问题。

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

var scr = document.body.scrollTop;

window.location.hash = ' ';

document.body.scrollTop = scr;

我的两分钱，从上面提到的真正的JS忍者身上带走了什么。：）

Answer 3

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

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

window.location.hash =“”;防止滚动到顶部？

3 个答案: