Reverse download infinityScroll response content

Question

I am wondering if infinityScroll can be loaded in the reverse order.

Now we have yours index.html, which on the scroll loads the external page2.html, then page3.html, etc. Therefore, when a user wants to add content, he simply duplicates the file pageX.html, modifies the content and assigns the corresponding next number to the html file. Nice and simple? But now the latest update with the latest content is at the bottom of the page, and not at the top, as we would like.

So my main idea is that if the user updates

<nav id="page-nav">
<a href="pageX.html"></a>
</nav>

for any highest number of its external html file, and then infinityScroll shows all the files in reverse order up to page1.html, which is the last.

Currently, it works as follows:
index.html - downloads the following files in this order
page1.html (oldest)
page2.html
page3.html
page4.html (newest)

But I would like it to be like this:
index.html - downloads the following files in this order
page4.html (latest)
page3.html
page2.html
page1.html (oldest)
and whenever you add a page, it "lands on top of the stack, "

It can be very useful for all of us right?

Anyone for calling? :)

Greetings

"infinityScroll" 2, , , -- ..

Answer 1

, , URL-, (permalinks), . , , foo 5 page5.html#foo.

, path. , , , .

// Amount of pages
var numPages = 45;

// Initialize infiniteScroll plugin
$(selector).infinitescroll({
    path: function (page) {
       // Concatenate the path to a page
       var path = "page";
       // Only add a page number if page is below or equal numPages
       if (page <= numPages) {
           path += (numPages - page);
       }
       // Return path as "page%d.html"
       return path + ".html";
    }
});

, URL (, ["/page/", "/"]), , URL-.

Answer 2

" " , :

$('.selector').infinitescroll({
    loading: {
        finished: function(){
         //move your newly-added content to the top using $.prepend()
        }
    }
})

Answer 3

I created a sample in which a new element (which you need to add) is added on top of the container element.

HTML:

<div id="container" class="container">   
</div>

CSS

.container {
    border: 1px solid #ccc;
    height: 100px;
    width:500px;
    overflow:auto;
}

JAVASCRIPT / Jquery

// page count
var count = 0;
var content_to_add_on_top = '<div>Page {count}</div>';


// call this function in every 2 seconds
setInterval(function () {

    // code which you need to call when you wants to add an element to top in container
    var content = content_to_add_on_top;
    content = content.replace(/{count}/g, count);
    var container = $('#container');
    var child_elements = container.children();
    if (child_elements.length === 0) {
        // if child element does not exists
        container.append(content);
    } else {
        // if child exists
        var first_element = child_elements[0];
        $(first_element).prepend(content);
    }
    // increment count
    count++;
}, 2000);

JSFiddle link

Hope this helps.