title: history.pushState breaking on browser back button
body: <p>I'm working on a single page application where each section is loaded via ajax. The homepage is its own page, then you click 'About' and it takes you to the single page app. I've gotten the url to change on each section and the back and forward buttons on the browser to work with this snippet:</p>
  
  <pre><code>$('.down-button').on('click', function() {
          var stateObj = { principles: "about-principles" };
          history.pushState(stateObj, null, "about-principles");
          $('#principles-wrap').scrollintoview({ duration: 1000 });
      });
  </code></pre>
  
  <p>However, when you click all the way back to the homepage, the homepage does not refresh, you remain on the 'About' page. Or, if you click on a link back to the homepage, you get a 404 error. </p>
  
  <p>What am I missing?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is the rest of the code:</p>
  
  <pre><code>function button_scroll () {
  // Call scrollIntoView js file into this 
  $.getScript("/js/jquery.scrollintoview.min.js", function() {
      $('.down-button').on('click', function() {
          var stateObj = { principles: "about-principles" };
          history.pushState(stateObj, null, "about-principles");
          $('#principles-wrap').scrollintoview({ duration: 1000 });
      });
      $('.up-button-principles').on('click', function() {
          var stateObj = { mission: "about-mission" };
          history.pushState(stateObj, null, "about-mission");
          $('#mission-wrap').scrollintoview({ duration: 1000 });
      });
      $('.down-button-principles').on('click', function() {
          var stateObj = { snapshot: "about-snapshot" };
          history.pushState(stateObj, null, "about-snapshot");
          $('#snapshot-wrap').scrollintoview({ duration: 1000 });
      });
      $('.up-button-snapshot').on('click', function() {
          var stateObj = { principles: "about-principles" };
          history.pushState(stateObj, null, "about-principles");
          $('#principles-wrap').scrollintoview({ duration: 1000 });
      });
      $('.down-button-snapshot').on('click', function() {
          var stateObj = { people: "about-people" };
          history.pushState(stateObj, null, "about-people");
          $('#people-wrap').scrollintoview({ duration: 1000 });
      });
      $('.up-button-people').on('click', function() {
          var stateObj = { snapshot: "about-snapshot" };
          history.pushState(stateObj, null, "about-snapshot");
          $('#snapshot-wrap').scrollintoview({ duration: 1000 });
      });
  
  });
  </code></pre>
  
  <p>}</p>
  
  <pre><code>//Dropdown
  $(document).ready(function () {
  $(window).on('load resize', function () {
      resize_mission();
      resize_principles();
      resize_snapshot();
      resize_people();
      button_scroll();
  });
  var dropDown = $('.dropdown');
  $('h3.about').on('click', function() {
      dropDown.slideDown('fast', function() {
          var url = 'about2.php'
          var stateObj = { mission: "about-mission" };
          history.pushState(stateObj, null, "about-mission");
          $.get(url, function(data) {
              resize_mission();
              resize_principles();
              resize_snapshot();
              resize_people();
              button_scroll();
          });
      });
  });
  </code></pre>
  
  <p>});</p>
  
  <p>This is all I'm doing. No plugins.</p>