Change browser back button behaviour for my web app?

Question

Im making an 'app like' web page. The actual page is wider than the browser viewport which has its overflow hidden. Clicking different links changes the CSS to animate to different sections. Here is a very simple demo: http://smartpeopletalkfast.co.uk/pos/

At this stage im working on a demo, not a production site. I want to intercept the browser back button, so if you've navigated to a section, you would be taken back to the previous section rather than leaving the web page. In a perfect world this would happen with the same animations ive used for navigating to sections.

Can this be achieved? From researching I dont think its possible to intercept and disable the default browser back button.

I know their are a lot of posts about disabling the browser back button on this site and normally the response is DONT! However going to different sections in my page is like navigating to separate pages, so I think what Im trying to achieve is in keeping with user expectations.

The way something similar seems to normally be achieved with AJAX based applications is using HTML5's History API. As I understand you need to add URLs with fragments to the browser's history so something like mysite.com#section2. Im not sure this will work for me however as the horizontal scrolling is not based on fragment links like vertical scrolling can be. Maybe I could use JavaScript to detect when the URL ends in a fragment like #section2 and alter the CSS so the 2nd section is in the viewport? I suppose there would be no way to animate to this though?

Solution 1

Use HTML anchor tags when clicking a navigation button (on your page). Thus, scrolling to where the anchor is located (top, left). This behaviour will make the browser's back and forward buttons navigate to the anchors.

Take these for example:

• http://smartpeopletalkfast.co.uk/pos/#filters
• http://smartpeopletalkfast.co.uk/pos/#map

Code for button:

<a href="#filters">Filters &lt;</a>
<a href="#map">Map &gt;</a>

Just change the anchor of the forward and back buttons on your page as it corresponds to where the user is navigating to. This makes the browser keep track of where the user is on your page.

Even if you don't add actual anchor links to make the hash tags work, you can still use javascript's window.location.hash property to navigate the user yourself.

Solution 2

The idea of changing the native behavior of the back button on browser is definitely a red flag signaling something is being approached wrong, and is not really possible cross-browser.

I would handle the unload event for the browser to try and smoothly transition between states.

Solution 3

I agree with Gabe in that trying to change the behavior of the back button is usually a red flag; however, after reading what you're trying to do, I don't see a problem. (It might be a terminology thing – you're not really trying to change the back button's behavior, you're trying to add state to the browser history so that the back button can navigate through it.)

You'll want to use jQuery BBQ, which manages state on the URL's hash (the part after the #). Listen for the hashchange event and animate between your panels accordingly:

$(window).on('hashchange', function() {
    var page = $.bbq.getState('page');
    // animate to `page`
});

Now, you don't even have to attach event handlers to your next page button – just link it:

<a href="#page=map">Map</a>