I have never heard of changing the main part of the URL without a page reload, however you can easily change the path on modern browsers: https://stackoverflow.com/questions/20041302/how-to-change-url-without-page-refresh
The down side to this is that if you save the path as a bookmark, you can't return to it later. However, there is a way around this:
Use some PHP to decide which bit of content to load based on the URL path. Before you serve any content, get the url with $_SERVER['REQUEST_URI'] and then parse it with parse_url($url) .
Then you can use the path to determine which position should be the starting position of your page.
On the page, I would have all the positions saved in an array. Then you can make a variable that allows you to define the starting position. This variable can be written dynamically with the php from above.
Each position in the array would have the scroll positions (most likely based on the positions of your content blocks).
To make everything load smoothly, you might want to start out by loading the starting position's, and the next position's, content. So, if you start at position 2, the page loads 1, 2 and 3. When the event to scroll to 3 is triggered, the page loads 4, and so on.
To get your scroll to snap in a similar way to that of the link you posted you are going to set up a "scroll event listener". This one seems to be nice: Scroll event listener javascript
You can set the listener to snap to the next position (in your positions array) when it is triggered by a scroll event (you can animate it too so that it is smooth). This way it will go to the next position without the user having to scroll half way there, and then the listener will lock so that it can not be triggered again when a scroll is taking place.
This scroll listener will then control position, loading, and the the rewriting of your URL. Then, the PHP will allow the user to return to the same page state that existed when a bookmark was made.
I hope this makes sence :p
Edit after first comment:
You might want to start out with a structure more like this -
/* Normalize */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
color: white;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
figure, figure.thumb, div, img {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
body{
position:absolute;
width:100%;
height:100%;
overflow:scroll;
}
div.wrap {
width:100%;
height:100%;
}
div.wrap article {
display: block;
width:100%;
height:100%;
}
/* demonstration purposes. not important. */
#one {
background: blue;
}
#two {
background: green;
}
#three {
background: red;
}
<body>
<div class="wrap" id="one">
<article>
Your dynamically loaded article content goes here.
<br />
This is your first page.
</article>
</div>
<div class="wrap" id="two">
<article>
Your dynamically loaded article content goes here.
<br />
This is your second page.
</article>
</div>
<div class="wrap" id="three">
<article>
Your dynamically loaded article content goes here.
<br />
This is your third page.
</article>
</div>
</body>
This way you can actually use the scrollbar to move to the next bit of content. As new content loads, it will write new .wrap divisions to your page.
You would basically be making a scroll loader, that snaps the scroll to a predetermined spot.
