Question

当用户按下后退按钮时，我使用onhashchange事件自动滚动到FAQ页面中的锚点链接。

除非按下前进按钮，否则滚动不起作用的情况下，它工作正常。

我无法理解为什么会这样。有没有人知道为什么会这样？

演示页面：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

似乎在使用背部＆amp;转发按钮，无论e.preventDefault();事件处理程序中的onhashchange如何，浏览器都会执行默认滚动操作。

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

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的浏览器的默认行为。

您可以查看this jsFiddle以查看实际工作示例

Answer 2

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

关于前进按钮的javascript hashchange奇怪的问题

2 个答案: