popstate - 需要在后退按钮上单击两次才能实际返回 [英] popstate - need to click twice on back button to actually get back

问题描述

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

I'm creating a single-page and using pushState to change the adress. Now, if I push back, popstate is fired and I want to animate the page scrolling from the current position to the last position. That works, of course, but the page jumps to the top.

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

Does anyone know how to prevent that behavior? I'm using jQuery to animate the scrolling....

谢谢：）

/ /编辑确定我发现，如果我动画滚动然后更改网址，它就不会跳转 - 但现在我必须双击后退按钮才能找回...

http://www.testwebseiten.at/user/falk/stein -jagersbacher.at

// edit: ok I found out, if I animate the scrolling and then changing the url, it won't jump around - but now I have to double-press the back button to get back...
http://www.testwebseiten.at/user/falk/stein-jagersbacher.at

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

The code is a little messy so I explain it a little:

    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 包含动画。

The sjag contains several options and methods... so sjag.index contains just 'index.php', sjag.scrollToSection contains the animation.

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

On clicking a link of the navigation, the following function gets called:

    // 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元素。

$(this).data('sjagpage') contains the jQuery-element.

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

When I don't animate the scrolling it only needs one click to get back - but when I now animate it, it needs two... why?

推荐答案

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

I think the issue is that event.preventDefault is a function added to the event object by jQuery but you're not binding the event handler using jQuery. Therefore the default navigation isn't being prevented, hence you end up with 2 history items though which to navigate back.

而不是：

window.onpopstate = scrollCurrentSection;

你应该约束它：

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

这篇关于popstate - 需要在后退按钮上单击两次才能实际返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！