Problem with the back button in combination with jQuery/Ajax & history.pushState

Currently i'm working on a website that uses AJAX to 'scroll' through different pages. I'm also using window.history.pushState to change the url.

Lets say your are on 'mywebsite.com' and you click on 'Page 1' in the menu. Then the current content fades out and the content of 'Page 1' fades in without reloading the page. Also the URL changes from 'mywebsite.com' to 'mywebsite.com/page_1/'. This all works fine!

When i push the back button the URL doe开发者_开发问答s change back to 'mywebsite.com' but the original content wont 'reload'. I know there is a way to fix this using hashtags but this is not the way i want it to work.

I hope some can help me out. Would be much appreciated!

The browser will not automatically restore the state of the page. Instead, it will fire the popstate event, and leave you to formulate the page as you please.

Therefore, you'd need to subscribe to the onpopstate event.

(Obviously only browsers which support the HTML5 history API will support this).