I am trying to trigger an event when the users scrolls down and reaches to the bottom of the page.

I searched the internet and found some posts in stackoverflow but unexpectedly the answers did not work for me.

Ex: Check if a user has scrolled to the bottom

using the answers given for the above SO post, the event I am trying to trigger is executed when reaching the top of the page and not the bottom.

Please let me know if I am going wrong:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
   loadmore();
}
});

function loadmore(){

var lastProd = $('.product_div').last(); 
var lastProdID = $('.product_div').last().prop('id'); 
//console.info(lastProdID); return false;
//var val = document.getElementById("row_no").value;
$.ajax({
    type: 'post',
    url: 'includes/load_products.php',
    data: { getresult:lastProdID },
    success: function (response) {
        console.log(response);
        //var content = document.getElementById("all_rows");
        //content.innerHTML = content.innerHTML+response;
        lastProd.after(response);

        // We increase the value by 10 because we limit the results by 10
        // document.getElementById("row_no").value = Number(val)+10;
    }
});
}

I am trying to trigger an event when the users scrolls down and reaches to the bottom of the page.

I searched the internet and found some posts in stackoverflow but unexpectedly the answers did not work for me.

Ex: Check if a user has scrolled to the bottom

using the answers given for the above SO post, the event I am trying to trigger is executed when reaching the top of the page and not the bottom.

Please let me know if I am going wrong:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
   loadmore();
}
});

function loadmore(){

var lastProd = $('.product_div').last(); 
var lastProdID = $('.product_div').last().prop('id'); 
//console.info(lastProdID); return false;
//var val = document.getElementById("row_no").value;
$.ajax({
    type: 'post',
    url: 'includes/load_products.php',
    data: { getresult:lastProdID },
    success: function (response) {
        console.log(response);
        //var content = document.getElementById("all_rows");
        //content.innerHTML = content.innerHTML+response;
        lastProd.after(response);

        // We increase the value by 10 because we limit the results by 10
        // document.getElementById("row_no").value = Number(val)+10;
    }
});
}

• javascript
• jquery
• ajax

• 2 Are there any errors in the console? It will be hard to help you without something reproducible. – Script47 Commented Aug 24, 2017 at 10:39
• Can you create a JSFiddle with the code you currently have? – Lajos Arpad Commented Aug 24, 2017 at 10:43
• Ok I will create a jsfiddle – deviloper Commented Aug 24, 2017 at 10:43
• 1 Possible duplicate of Javascript: How to detect if browser window is scrolled to bottom? – Script47 Commented Aug 24, 2017 at 10:47

3 Answers 3

Use window.innerHeight + window.scrollY to determine bottom position and check if document.body.offsetHeight is lower (equal won't work).

Credit goes to mVChr, see here.

window.onscroll = function(ev) {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    alert("bottom of the page reached");
  }
};

.jump {
  height: 1000px;
}

<div class="jump"></div>

check the height and offset are equal

window.onscroll = function() {
  var d = document.documentElement;
  var offset = d.scrollTop + window.innerHeight;
  var height = d.offsetHeight;

  console.log('offset = ' + offset);
  console.log('height = ' + height);

  if (offset === height) {
    console.log('At the bottom');
    loadmore(); // call function here
  }
};

The only proper way to do this, at time of writing Feb/11/2022, is here: Check if a user has scrolled to the bottom in subpixel precision era

That detects bottom of scroll for any element. To do this with the "window" in a default web page, you should set element to document.documentElement or document.scrollingElement to get the result you want.

Or, apply the same Math.abs trick as in that answer with window.scrollY, but not that that does not work with scrollable in any other elements, only the documentElement (that's what element is being scrolled when saying "window scroll", and it is the root <html> element).