Prevent auto-scroll when klicking back button but not leaving page?

Question

When you click a post, the post animates in and the URL hash changes. The problem is when going back, I would like a smooth animation back to the same position the user was when he clicked the post. Right now, it just jumps back to the position, and it just doesn't look good.

I read this question: Prevent browser from snapping to previous scroll position when pushing back button

But my situation is a little different because the page doesn't actually reload (the hash just disappears).

Is it possible to get rid of the auto-scroll?

You may delete or edit this function `$(window).hashchange(function(){});` in http://dev.fristil.se/sdh/wp-content/themes/sdh/theme.js — HamZa, Jan 07 '13 at 08:35
No, i definitely wouldn't want to do that. That function just reverts the posts (hides the current one and shows the rest), and then it **tries** to animate the scroll position to what it was before, but since the browser scrolls automatically the animation doesn't do anything. — qwerty, Jan 07 '13 at 08:45

score 0 · Answer 1 · edited Jun 30 '13 at 19:57

I recommend you History.js: https://github.com/browserstate/History.js/

It's easy for changing urls without reloading and for managing the page history.

Unfortunatelly you can't catch the 'back' event because it doesn't exists, but you can catch the statechange

// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log(State.data, State.title, State.url);
});

What I usually do is to catch the user's clicks, and if a statechange is trggered without a click I supose that the user go back.

Prevent auto-scroll when klicking back button but not leaving page?

1 Answers1