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?
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:
Code for button:
<a href="#filters">Filters <</a>
<a href="#map">Map ></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.