6

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?

lumio
  • 7,428
  • 4
  • 40
  • 56

1 Answers1

0

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);
Duncan Smart
  • 31,172
  • 10
  • 68
  • 70
  • I see ... the animation or the finish function is called twice... I try to isolate that error :) thank you – lumio Mar 09 '12 at 14:07
  • Okay the problem was that I animated html and body - so the callback-function got executed twice. – lumio Mar 09 '12 at 14:59