Question

我正在创建一个单页并使用pushState来更改地址。现在，如果我向后推，popstate会被触发，我想动画页面从当前位置滚动到最后一个位置。当然，这有效，但页面跳到了顶部。

有谁知道如何防止这种行为？我正在使用jQuery为滚动设置动画....

谢谢：）

//编辑确定我发现，如果我动画滚动然后更改网址，它就不会跳转 - 但现在我必须双击后退按钮才能获得回来...
http://www.testwebseiten.at/user/falk/stein-jagersbacher.at

代码有点乱，所以我解释一下：

    var scrollCurrentSection = function(event) {
        if (typeof event.preventDefault != 'undefined')
            event.preventDefault();

        var page = "";
        if (window.location.href.substr(-1) == '/')
            page = sjag.index;
        else
            page = window.location.href.match(/([^\/]+)$/)[1];

        $this       = $('a[href$="'+page+'"]');
        if ($this.length) {
            sjag.scrollToSection($this);
        }
    }
    window.onpopstate = scrollCurrentSection;

sjag包含几个选项和方法......所以sjag.index只包含'index.php'，sjag.scrollToSection包含动画。

单击导航链接时，将调用以下函数：

    // set navi
    $("#navi a, #navi-add a").click(function(event) {
        var data = $(this).data('sjagpage');
        if (typeof data == 'undefined')
            return;

        event.preventDefault();
        // animate scrolling
        $this   = $(this);
        sjag.scrollToSection($(this), function() {
            history.pushState("", "", $this.attr('href'));
        });
    });

$(this).data('sjagpage')包含jQuery元素。

当我没有为滚动设置动画时，只需要点击一下即可 - 但是当我现在为其设置动画时，它需要两个......为什么？

Answer 1

我认为问题是event.preventDefault是jQuery添加到event对象的函数，但是你没有使用jQuery绑定事件处理程序。因此，不会阻止默认导航，因此您最终会获得2个历史记录项，但可以导航回来。

而不是：

window.onpopstate = scrollCurrentSection;

你应该绑定它：

$(window).bind("popstate", scrollCurrentSection);

popstate - 需要在后退按钮上单击两次才能实际返回

1 个答案: