Home/ Questions/Q 8126999
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T07:21:43+00:00

I’m trying to add infinite scroll functionality to a page using code given in

  • 0

I’m trying to add infinite scroll functionality to a page using code given in this question, Check if a user has scrolled to the bottom, but nothing happens when I scroll to the bottom of the page. Here is the code so you don’t have to follow the link:

<script type="text/javascript"> 
alert("popup!");    
$(window).scroll(function() {   
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("bottom!");
   }
});  
</script>

I added in the first alert to check if it was simply my browser blocking alerts, but it displays fine. The server also has JQuery 1.7.2 min installed and the page is masonry correctly, so I don’t think it is an installation problem.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After your reply to my comment, you said you are getting

    In the console tab I'm getting Uncaught ReferenceError: $ is not defined

    I’m guessing then, that you havent included jQuery in the header of your page (this needs to be in the <head> of each page)

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    This will tell you if JQuery has sucessfully loaded on your page

    if (typeof jQuery != 'undefined') {
    alert("jQuery library is loaded!");
}else{
    alert("jQuery library is not found!");
}

    Original comment:

    try putting console.log($(window).height()+"<-current sctoll | target->"+($(document).height() - 100)) in that loop, open it in chrome and right click -> element inspector, open the console tab, that will tell you what the values are each loop, should help you diagnose the problem. If you don’t get any traces, the event is not firing

    • 0