How to load different pages like on Reuters.com?

Question

If you read an article on Reuters.com and scroll down to the bottom of the page, another article will show up, and the url changes. If you scroll back you see the previous page, with the previous url.

I have just three php pages that I would like to load one after the other, as one scrolls down the page. Is there a clean way to do that?

Something like:

Page1:

<code of Page1>
<append Page2 code>

Page2:

<code of Page2>
<append Page3 code>

Infinite scroll libraries, like jquery-ias don't seem to support such behavior, or at least I don't see how.

Answer 1

This worked for me:

1. Add placeholder divs at the end of the page:

<div id="2nd"></div>
<div id="3rd"></div>

2. This jquery script:

   $("#2nd").load("all.php");
   $("#3rd").load("target.php");
   

Answer 2

History Web API in Infinite Scroll Interface.

Live demo - Source code

Answer 3

This can be achieved with Infinite Ajax Scroll with the history extension.

In your case you would need a link to the next article at the bottom of the article. Use this link in the configuration of IAS. Then when you scroll down, IAS will load the next page and update the url.

See a demo.