How To Load A New Page/url When User Reach The Bottom

I am creating infinite load,means a new page gets loaded when user reach bottom of the page/particular div. Currently i have this code to load new page on click. $('#about').click(

Solution 1:

You want to use AJAX to load additional content as the user scrolls. I would recommend adding the additional content to they page they're already viewing (for instance, appending to the main div), rather than shifting them over to a different page. This will create a better user experience.

Solution 2:

Bind Scroll event with your scrollable content

$("#scrollableContent").scroll(function(){
    if($("#scrollableContent").position().top + $("#scrollableContent").height() == $(window).height()){
        //AJAX Call
      $("#response").load("about.html");
    }
});

Solution 3:

You can calculate the Div height + the scroll top position like:

var divHeight = ($("#about").height()+$("#about").scrollTop() ;

if this is greater or equal to the height of the table inside this Div, then that means the user reached the end of the Div. And you can load the page you wanted.

Note: You should have a table inside this Div.

Solution 4:

You can send the ajax call based on mouse window position.

var no=1;
    $(window).scroll(function () {
        if(no==1)
        {
            if ($(window).height() + $(window).scrollTop() == $(document).height()) {
                no=2;
                $.ajax({
                    type: "POST",
                    url: "about.html",
                    data: datas,
                    cache: false,
                    success: function(html){

                    }
                });
            }
        }
    });

This ajax call will call when a user reaches at end of page. You can specify a height at which it occurs.