Question

I have an ajax navigation similar like here.

now if a menu is clicked window.location.hash is added like this #about

i want to REmove the hash (#) so that people can easily copy and share the link naturally.

How this can be done in april 2012 without a pagerefresh crossbrowserwise (IE7+,FF,Opera,Safari) ?

For inspiration: Here is actually someone already doing this, click on “portfolio” or “features” and watch the url in your browser.

thanks for tips

Answer 1

Use the history API when available. Instead of setting the hash (on browsers that support it), go:

history.pushState({ /* Some state object */ }, "A title representing this state");

Then, handle the state change in a popstate event listener. Doing things this way means the URL won’t change, but history will still be fully functional.