Change URL in browser address bar without reload existing page

html, javascript, url

Solution

Here is a similar question.

Here is an example:

function processAjaxData(response, urlPath){
    document.getElementById("content").innerHTML = response.html;
    document.title = response.pageTitle;
    window.history.pushState(
        {
            "html":response.html,
            "pageTitle":response.pageTitle
        },
        "",
        urlPath
   );
}

Problem

Possible Duplicate: Modify the URL without reloading the page I'm looking for a way to make my internal links functional using my current javascript animations, without causing the page to reload when you click on them - but I would like the URL to update in the browser. Many websites do this, here is a good example: http://grooveshark.com/#!/search?q=adf How do they get the URL to update without the page reloading? More details: Currently a link on my page looks like `<a href="#aboutus">About Us</a>`, this takes you to `<div id="aboutus"></div>` via javascript. The javascript looks something like: ``` $("#navigation a").click(function(e){ animate(..scroll to section..); e.preventDefault(); // <========== }); ``` I believe the "e.preventDefault()" is what is causing the URL to not be updated, but how do I prevent the browser from reloading the page when the URL is changed? How do other websites do it? What is this method called (so I can further research it)? thanks.

Original source

Related problems