javascript - 防止在单击内部链接时滚动

Question

我的 html 页面上有一个内部链接。单击内部链接会发生两件事。

1. 页面滚动（跳转），使链接的目标位于页面顶部。
2. url 反映通过显示/abc/#...点击的内部链接

我注意到这两个步骤的顺序也是一样的。iehashchange在滚动发生后被触发。我想阻止滚动但允许hashchange发生。如果我编写一个onclick事件来返回 false（即阻止它），那么即使该hashchange事件也不会被触发。有什么建议可以做吗？

Answer 1

您可以使用window.history.pushState()或window.history.replaceState()。这些方法不会滚动。遗憾的是，Internet Explorerhistory仅从版本 10 开始支持。

例子：

document.body.addEventListener('click', function(oEvent)
{
    if (oEvent.target.nodeName == 'A'
    &&  oEvent.target.hasAttribute('href')
    &&  oEvent.target.getAttribute('href').charAt(0) == '#')
    {
        oEvent.preventDefault();
        history.pushState(null, '', oEvent.target.getAttribute('href'));
    }
}, false);

PS。我的页面应该在禁用脚本的情况下继续工作，所以我保留元素的 ID，至少在单击某个链接之前。