21

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:

www.blablabla.com/blog

user scroll down...

www.blablabla.com/blog/entry-name

I know about hashing... can I mask the URL?

pixelbobby
  • 4,368
  • 5
  • 29
  • 49
eptype
  • 211
  • 1
  • 2
  • 4
  • I'm curious to see where this goes but my gut feel is it's a _bad practice_. So, if I'm looking at the said blabla blog home page and scrolling down several posts, my address bar will dynamically change so that when I copy and paste that URL to a friend they will see the page at the same bookmark/scroll position? – pixelbobby May 27 '11 at 00:36
  • yes this is what I would like to happen. – eptype May 27 '11 at 00:39
  • better cross your fingers on this one... – pixelbobby May 27 '11 at 00:40
  • I found this: http://jqueryfordesigners.com/demo/scroll-link-nav.html#third But I feel like it might not work well with a page that has a ton of content on it. – eptype May 27 '11 at 00:42
  • I checked that out in chrome but it didn't change the url as I scrolled, only visibly changed the link buttons css, which was cool... I guess. – pixelbobby May 27 '11 at 00:47
  • You can now. Please check my answer below. – Erik Pragt May 02 '13 at 12:07

7 Answers7

31

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.

Erik Pragt
  • 13,513
  • 11
  • 58
  • 64
  • 2
    Thanks for your answer. This was exactly i was looking for. Another nice example: rollingstone.com/music/lists/15-great-albums-you-didnt-hear-in-2014-20141217 – Herr_Schwabullek Dec 18 '14 at 08:34
6

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

lmirosevic
  • 15,787
  • 13
  • 70
  • 116
4

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.

dtbarne
  • 8,110
  • 5
  • 43
  • 49
  • I would want to do that so that when a blog post is shared it would be positioned in the correct spot on the page. – eptype May 27 '11 at 00:40
  • so I could mask that url from www.homepage.com/blog/#entryname to www.homepage.com/blog/entryname – eptype May 27 '11 at 01:15
  • Please check http://winners.webbyawards.com/2013/online-film-video/general-film-categories/drama or my answer below, and scroll up or down. So yes, this is certainly possible. Then again, now it's 2013 ;) – Erik Pragt Jul 22 '13 at 14:29
0

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.

MRRaja
  • 1,073
  • 12
  • 25
0

it is possible using window.pushState method.

Jagdeesh Kumar
  • 1,640
  • 2
  • 13
  • 29
-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.

smartcaveman
  • 41,281
  • 29
  • 127
  • 212
-2

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

CodeMan
  • 1,375
  • 1
  • 7
  • 7
  • 2
    Actually you are not allowed to change it without refreshing. – Bakudan May 27 '11 at 00:39
  • 4
    well by changing the URL you could trick the user to think they are on a website that they are really not. Like they visit www.blablabla.com/blog and you change the URL to www.yourbank.com they could believe they are actually viewing their bank website. – CodeMan May 27 '11 at 00:46