title: I want to always go to first page when going back in history
body: <p>I have built a mobile application using HTML5 &amp; jquery mobile, I just need to go back to first page each time the back button is pressed.</p>
  
  <p>Let's say I have these pages:</p>
  
  <ul>
  <li>Main</li>
  <li>Product</li>
  <li>Search</li>
  <li>Search Result</li>
  <li>About</li>
  </ul>
  
  <p>Let's say I go:</p>
  
  <p>Main --> Search --> Search Result --> Product, then I went to About page.</p>
  
  <p>When going back, the history would be (if I'm on About page):</p>
  
  <p>About --> Product --> Search Result --> Search --> Main</p>
  
  <p>What I need is to go back directly to Main page each time I press back page and not to go through the history.</p>
  
  <p>I tried to search for this in the last couple without any luck, and it is stopping me from finalizing my app.</p>
  
  <p>I was trying for days to search for answer I came to this code:</p>
  
  <pre><code>jQuery(document).ready(function($) {
  
    if (window.history &amp;&amp; window.history.pushState) {
  
      $(window).on('popstate', function() {
        var hashLocation = location.hash;
        var hashSplit = hashLocation.split("#!/");
        var hashName = hashSplit[1];
  
        if (hashName !== '') {
          var hash = window.location.hash;
          if (hash === '') {
              window.location = 'index.html#mainScreen';
          }
        }
      });
  
    }
  
  });
  </code></pre>
  
  <p>but still no luck</p>
  
  <p>I also got this code:</p>
  
  <pre><code>$(window).on("navigate", function (event, data) {
    var direction = data.state.direction;
    if (direction == 'back') {
      window.location = 'index.html#mainScreen';
    }
  });
  </code></pre>
  
  <p>It is going back to the mainScreen page if the direction is back, but it showing the last page before going back to the main page.</p>