CODEWITHSUNDEEP
javascriptjqueryhtml
lumio
lumio

Reputation: 7585

popstate - need to click twice on back button to actually get back

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.

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

Thanks :)

// 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;

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') 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?

Upvotes: 6

Views: 6409

Answers (1)

Duncan Smart
Duncan Smart

Reputation: 32088

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.

Instead of: 

window.onpopstate = scrollCurrentSection;

You should be binding it something like:

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

Upvotes: 0

Related Questions