单击内部链接时阻止滚动

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

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