Infinite Scroll to Top

You don't really need jQuery, you can register your own event listener on the window which is watching for the current position in the window and whether your user has scrolled up to that position:

var previousY = 0;
window.addEventListener('scroll', function(e) {
    var currentY = window.scrollY;
    if (currentY < previousY && currentY == 0) {
        console.log('load more!!!!');
    }
    previousY = currentY;
});

If you are scrolling up and reach the top of the page you can trigger loading more records. The code above is a starting point and can be optimised further, e.g. if the page does not scroll from the first rendering, this will not fire . Good luck.

@tykus - I want this to work inside a div. How'd that work? I'm a complete n00b when it comes to JS or jQuery. Would really appreciate some help.

What I have is a scrollable div. Like in a chat window; new messages get added to the bottom of the existing messages. But when user wants to view old messages, they'll have to scroll to the top of the div, at which point, I need to trigger Ajax request. I'm comfortable with axios.

You can write this using jquery, to detect when scroll position reaches top of the div.

$('.yourDiv').scroll(function(){
    if( $(this).scrollTop()==0 ){
        //some code
    }   
});

Thank you, @alicegray . I'm going to give this a try. How to make it trigger when say the scrollbar is 200 pixels away from the top? I think it can be achieved through offset?

Would scrolltop() = 200 in above code work?