One page website and linking

Question

Ok guys, what I can't seem to grasp is how, on a one page website, you link to certain pages/divs while using the scrollto function.

if you look at Ultranoir.com

You can see the site is built with the one page format but if you watch the url field, it navigates to subfolders etc, but is still loading all content dynamically. How do they achieve this effect while still keeping it so clean and ordered? on my current site it all stays at www.url.com/index.html even when I navigate pages. any help? thanks!

Answer 1

They are using hash tags to load different parts of their pages dynamically. if u add i.e. index.html#!/blog or index.html#!/about

you can parse the url client-side using javascript and load the correct content through ajax based on the url.

Check out this page to see an example implementation of this functionality using php and JQuery: http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

Answer 2

They do it by abusing the fragment identifier. A modern approach would make use of pushState