如何操纵浏览器历史记录并捕获浏览器后退/前进按钮？

Question

I've been searching for couple of hours now trying to make a simple browser history manipulation.

I have a couple of menu links and I bind click handlers to them. Links' href's are just hashes: href="#Home" or href="#About" .

I would like to display a subpage when user clicks on link, without page reload and change the browser url.

I've also tried this basic example with pushState() but it doesn't work: http://jsbin.com/wecubizovu/1/edit?html,js,console

http://jsbin.com/wecubizovu

When I run this in Chrome, I expect that, if user clicks on the link, he'll have #asd appended to url and popstate won't change . Why is popstate being triggered? How can I make it so that when user clicks on a link, I append hash to browser url and when user clicks browser back button, I catch that event and display the piece of page that I want?

Thanks!

Answer 1

Your a element has a href of '' which is still executed if you do not prevent the default action and this somehow messes up what you want to do. Changing your function to

$("#asd").click(function(e) {
  e.preventDefault();
  alert("jo");
  window.history.pushState("", document.title, "#asd");
});

achieves what you are looking for.

EDIT: Links: http://jsbin.com/sosozeteti

http://jsbin.com/sosozeteti/1/edit?html,js