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

Question

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

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

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

Answer 1

您可以使用

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

例：

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

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