title: Popstate with Hashtags?
body: <p>I have a site that uses AJAX to dynamically load content into a div.</p>
  
  <p>The links to do so are anchors with href="#" and an onclick event to trigger the AJAX.</p>
  
  <p>This leaves me without a history when I click back, so if I load one page, then another and click back, it does nothing.</p>
  
  <p>A basic version of the code is this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function loadXMLDoc(url)
  {
  &lt;!-- Load XML Script here. --&gt;
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="myDiv"&gt;
  
  &lt;!-- Target div. --&gt;
  
  &lt;/div&gt;
  
  &lt;a href="#1" onclick="loadXMLDoc('1.txt')"&gt;Click Me.&lt;/a&gt;
  
  &lt;a href="#2" onclick="loadXMLDoc('2.txt')"&gt;Click Me.&lt;/a&gt;
  
  &lt;a href="#3" onclick="loadXMLDoc('3.txt')"&gt;Click Me.&lt;/a&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>What I would like to know is, can I give each link a different "#" and then use a popstate handler to call the appropriate event, so if I click link 1, 2 and then 3 and then start hitting the back button, it'll go back to 2 and then 1 etc..</p>
  
  <p>I was going to use history.js and start using pushstate in the loadXML script but I think the whole manipulating history thing is a bit dirty and unreliable.</p>
  
  <p>Am I thinking on the right lines or is there a better way?</p>
  
  <p>Currently all my links just use "#" so that it pops back to the top of the page when loading more content but I'd like to be able to go back if possible.</p>
  
  <p>Any help would be great.</p>