Search code examples
phpjqueryhtmlinfinite-scrolljquery-ias

How to load different pages like on Reuters.com?

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.

Solution

  • This worked for me:

    1. Add placeholder divs at the end of the page:
    <div id="2nd"></div>
<div id="3rd"></div>

    1. This jquery script:

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