.offset (). top returns the wrong value

Question

.offset (). top returns the wrong value

I have a strange problem, I don’t know how to solve it, and I was wondering if you guys could help.

A bit of background: I was asked to create a system in which the subpages of a page in wordpress load at the end of this page in endless scrolling. This is working correctly.

They also want the top navigation links to load all the content up and include the page they clicked on, and then scroll through it.

If I scroll down (loading the pages) and then click the top navigation link, the scroll works correctly. However, if I load NO further pages before clicking on one of the links, the pages will load and the scrolling will begin, but until it stops, there will be only a part. This is due to the incorrect value given by offset (). Top My question is why?

function ajaxloadnscroll(index) {

    //If the page has already been loaded then just scroll to it
    if (pages[index].loaded) {
        $('html, body').animate({
            scrollTop: $("#" + pages[index].name).offset().top
        }, 2000);
        return;
    }

    //Loop through pages up to one clicked.
    for (i = 0; i <= index; i++) {


        current = i;
        if (!pages[current].loaded) {
            $.ajax({
                url: pages[i].url,
                async: false,
                context: document.body,
                success: function(data) {
                    if (data) {
                        $("#tempload").before(data);
                        pages[current].loaded = true;

                        if (current == index) {
                            $('html, body').animate({
                                scrollTop: $("#" + pages[current].name).offset().top
                            }, 2000);
                        }

                    }
                }
            });
        }
    }

    //Increment current in order to load next page object on scroll.
    current++;
    return false;
}