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

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;

可以调整这些方法中的任何一种以避免滚动单个元素或水平滚动页面.请注意,您可以 通过调用或函数来删除整个哈希(包括#),而不会导致现代浏览器中的导航或滚动.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忍者身上得不到任何东西.:)