Is it possible to have the url change while you scroll down a single page

Question

Is it possible to have the url change while you scroll down a single page with ajax? I have a website all on one page and want to have this effect.

example:

Answer 1

No, for security reasons you are not allowed to change the URL using javascript

Answer 2

I know this is a bit of an older question, but browsers changed, and right now, it is possible to do what the poster requested. This means that most of the other answers are no longer valid. I'm posting a way to accomplish this so that it might help people using Google to find the correct answer.

In short, on modern browsers (browsers with HTML 5 support) you can. Please have a look at this article.

It basically boils down to the following line of code:

window.history.pushState("object or string", "Title", "/new-url");

Executing the above code will change the URL to example.com/new-url, and will help you accomplish what you wanted.

For a demo, you can take a look at the Webby Awards, where this method is used. Just scroll up or down and look at the address bare. The effect is pretty impressive.

Answer 3

You can use pushState() to modify the URL displayed in the browser URL bar without reloading or using the hash. As long as your browser supports HTML5 that is.

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Answer 4

what about https://github.com/browserstate/history.js/history.js

Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore.

Answer 5

No. Not sure why you would want to either.

As you mentioned, the only way would be to add it on to the page's hash, ex.

http://www.website.com/blog/#entry-name

Then to scroll to that part of the page, something like:

if (window.location.indexOf("#") > 0) {
    var entry_id = window.location.substring(window.location.indexOf("#"));
    $('html, body').animate({
        scrollTop: $(entry_id).offset().top
    }, 2000);
}

EDIT: This is long since possible with window.history.pushState.

Answer 6

it is possible using window.pushState method.