JavaScript 哈希更改转发按钮上的奇怪问题

Question

当用户按下后退按钮时，我使用 onhashchange 事件自动滚动到常见问题解答页面中的锚链接。

它工作正常，除非按下前进按钮，在这种情况下滚动不起作用。

我一直无法理解为什么会发生这种情况。有人知道为什么会这样吗？

演示页面：http://static.nemesisdesign.net/hashchange-issue/index.html（要重现问题，请尝试单击左栏中的链接，然后按几次后退按钮，然后按前进按钮）

这是执行滚动的代码部分：

// if browser supports onhashchange event
if ("onhashchange" in window){
    $(window).bind('hashchange', function(e){
        e.preventDefault();
        var href = (location.hash != '') ? location.hash : '#container'
        scrollToFaq(href);
        return false;
    });
}
scrollToFaq = function(href){
    // scroll
    $('html, body').animate(
        // scroll to clicked item
        {scrollTop: $(href).offset().top},
        400, // duration in ms
        function(){
            if(href != '#container'){
                location.hash = href.replace('#',''); // update hash
            }
            // show back button if necessary
            if($(window).scrollTop() > 60){
                // onclick back to top button
                $('#back-top').fadeIn();
            }
        }
    );
}
// when clicking on a faq menu item
$('#faqmenu a').click(function(e){
    // prevent default behaviour
    e.preventDefault();
    // cache href attribute
    scrollToFaq($(this).attr('href'));
});

Answer 1

似乎在使用后退和前进按钮时，浏览器会执行其默认滚动操作，而不管onhashchange事件处理程序中的e.preventDefault();如何。

基本上，这不会阻止浏览器在使用后退和前进按钮时跳转：

if ("onhashchange" in window){
    $(window).bind('hashchange', function(e){
        e.preventDefault();
        return false;
    });
}

我能想到的最简单的技巧是在哈希中使用一些不存在的 id（这样它就不会跳转）。

例如，对于引用<div id="a">您可以使用<a href="#xxx_a"> 。然后你所要做的就是用javascript剥离xxx_部分。

但缺点是，您破坏了禁用javascript的用户和不支持onhashchange的浏览器的链接的默认行为。

您可以查看此jsFiddle以查看工作示例

Answer 2

另一种方法是在文档准备就绪时使用JavaScript删除/更改id属性。 这样，您可以很好地降级并绕过您在此处遇到的默认滚动行为......