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

Question

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

window.location.hash = 'project_name';

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

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 函数在现代浏览器中引起导航或滚动。