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

Yes, you can, but it's a little tricky.

If you have this on your index.html page:

  <a id="link-to-later" href="#later">Go to later</a>
  <p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p> 
  <a id="later" name="later">Some later anchor</a>

Then clicking the top link will take you to the anchor below without reloading the page and the url will be index.html#later.

By using the window.onscroll event you can hook an event to the user scrolling down the page. The event handler could include something like $('#link-to-later').click(), which would send the user's browser to point on the page with the later anchor.

You will need to do some work to keep this from being too choppy, but it is doable.