在 URL 重写期间阻止 IE/FF 处理锚点？

Question

抱歉标题，不知道如何措辞。

我的页面顶部有一个导航菜单。单击每个链接将滚动到目标元素。它还将#sectionname 附加到URL。在 Chrome 中一切正常。我遇到的问题是菜单本身是静态的，所以当我启动滚动时，我正在偏移菜单高度。同样，在 Chrome 中效果很好，但在 IE 和 FF 中，它会滚动到我想要的位置，然后立即跳回元素的顶部减去偏移量。

代码如下：

$('.nav').on('click', function (e) {
    e.preventDefault();
    var target = $(this).data('target');
    $('html, body').stop().animate({
        scrollTop: $(target).offset().top - 77          //should actually be 78 (height of the header, but IE has a 1px discrepancy.
    }, 800, 'swing', function () {
        window.location.hash = target;                  //causes IE and FF to jump back to the original top without the header offset.
    });
});

如何防止 IE 和 FF 立即处理新 URL？或者有更好的方法吗？

Answer 1

您可以使用history.replaceState()修改地址字符串见history.replaceState() example?

history.replaceState({}, target.slice(1), target);