While some websites create a way to break down large content to appear on multiple HTML pages (mainly to increase the number of hits and thus amount of advertising they can send the user), newer websites use newer available technology that does the opposite.

As you scroll down the page, the next page (article, blog post...) gets loaded and presented to you on the exact same page. This works using AJAX to load the next page content. When you actually reach that page (scroll down enough) the script changes the URI in the location bar using the new history mechanism available since 2008 or 2009. This way you have the correct URI in the location bar in case the user wanted to give a friend the URI to go read that article.

The JavaScript needs to listen to the vertical scroll and decide when to load the next page. Also, it is possible to allow for a previous page. This can be done by adding an area before the current article allowing the user to scroll up. If that happens, load the previous page and change the URI.

The implementation uses the history to change the URI in the location bar without triggering a reload. We can either push the URI (i.e. it appears in the history) or just change the current state.

The following adds each page to the browser history:

window.history.pushState(state_data, title, url);

You can connect to the onpopstate() and onpushstate() when changing the history states.

The following code changes the URI without changing the history:

window.history.replaceState(state_data, title, url);

That is, it replaces the current history state instead of creating a new state in the history. Depending on the type of data in the pages, it may be quite useful.

Sources:

Mozilla, Manipulating the browser history

Stackoverflow, Modify the URL without reloading