1

当用户按下后退按钮时，我使用 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'));
});
4

2 回答 2

4

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

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

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

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

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

但缺点是您破坏了禁用 javascript 的用户和不支持onhashchange.

您可以查看这个 jsFiddle以查看一个工作示例

于 2012-05-29T15:36:15.153 回答
2

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

于 2012-06-21T21:40:38.607 回答