Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

like image 726
eptype Avatar asked May 27 '11 00:05

eptype


People also ask

How do I change my scrolling URL?

You can bind to the jQuery scroll event (http://api.jquery.com/scroll/) and on each call of the callback called, check how far on the document the user has scrolled by checking this value: . scrollTop (http://api.jquery.com/scrollTop/) and set the anchor by manipulating te location.

How do I scroll down on a website?

Scroll one page at a time in all major browsers including Microsoft Internet Explorer and Mozilla Firefox by pressing the Spacebar key. Move back up the page by pressing Shift + Spacebar or the Home key on the keyboard.

How do you auto scroll to a section in HTML?

You can use . scrollIntoView() for this. It will bring a specific element into the viewport.


2 Answers

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.

like image 146
Erik Pragt Avatar answered Sep 28 '22 15:09

Erik Pragt


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

like image 45
lmirosevic Avatar answered Sep 28 '22 16:09

lmirosevic