title: How to implement my own history stack in a single page mobile web application?
body: <p>I have a single-page mobile application developed with Backbone and Zepto.</p>
  
  <p>It works correctly with the back/forward buttons in the browser.</p>
  
  <p>When the user navigates to a page, the <em>new</em> content slides in from the right as the <em>old</em> contents slides away to the left (and out of the viewport). I want the same thing to happen if the user presses the "forward" browser button. This all works.</p>
  
  <p>I've got a class that I add to the body element <code>navigate-back</code> that will flip this behaviour, so when the user navigates back with the browser's back button, they see the content sliding <em>back</em> in from the left and the other content sliding into the right. Basically just the opposite of going forward.</p>
  
  <p>I need to detect if the user is navigating backwards so I can invoke the alternate behaviour. I have tried implementing my own history stack, but I've ran into lots of problems where sometimes it marks a forward as a <em>back</em> navigation which ruins the visual cue. It's descended into a kludge of hacks now and probably would only embarrass me if I posted it.</p>
  
  <p>What is the best way to implement my own history stack so I can detect if the user is navigating forward/back in the context of a single-page Backbone mobile application?</p>