jQuery Tips: Develop infinite scrolling

[Originally posted on http://onlyms.net]
This simple below JQuery code can use for infinite scrolling. Just look into it, its extremely simple and easy task. Just follow below codes

Java Script
Include JQuery file as below:

< scri pt sr c="js/ jquery-1.10.2.js">

    < sc ript src="js/jquery-1.10.2.min.js">
and java script code as :


        $ ( func tion () {
            $(win dow) .scr oll(fu nction (ev ent) {
                cons ole.log($(".lo ad-more").off set().top < $(wi ndow).scroll Top() + $(win dow).outer Height()); // You can track if result is true or false
                if ($(". load-more").off set().top < $(win dow).scroll Top() + $(window).outer Height() == true) {
                    //Method to load next page
                }
                else {
                    //Do nothing or do as you want
                }
            });
        });
    < / sc ript

CSS section as below, just used for selector. You can update if you need.

        .load-more {
        }
    </ sty l e

HTML part as below:

< d iv>
    < text area style="wi dth: 50%; hei ght: 110vh;">
    This is to fill full screen, so load more button go to invisible section
< / text area>
    < in put clas s="load-more" val ue="load more" typ e="button" />
</ d iv>