Detect the scrolling to bottom of the page using jQuery.

jquery-scroll-bottom.js

$(window).on("scroll", function() {
	var scrollHeight = $(document).height();
	var scrollPosition = $(window).height() + $(window).scrollTop();
	if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
	    // when scroll to bottom of the page
	}
});

Works perfectly 👍 👍

Excelent!

like it :)

Work like a boss

thanks but this command don't work for me.
$(window).height() is equal to $(document).height() ?

Works inversely i.e when I scroll to the top of page only then it fires. Probably my system scroll is inverse?

@amigoow, I also had the same issue. I realized that my html, head and title elements were in caps. After changing them to lower cases, everything work perfect.

This works too

    $(window).scroll(function(){
        if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $('.s3cc-fixed').css('position','static');
        }else{
            $('.s3cc-fixed').css('position','fixed');
        }
    });

great commit !! thx

awesome!

Works! so happy! 😄

awesome

I had the same issue, but none of these solutions helped me. For whom it is not not working just try this code and you are done

       $(window).on("scroll", function() {
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                // ok
            }
        });

@areghunanyan it worked amazingly, thanks

awesome!

@areghunanyan Pukka... Thank you so much.....

Thanks a lot .
can you show how you can detect end of any html tag which has some class

@areghunanyan thanks

You can check this as well...
http://www.skptricks.com/2017/11/dynamically-load-data-on-div-scroll-using-php-mysql-jquery-and-ajax.html

Great idea!!

Nice!

not working in tablet

Good ! Tanks @

I like your used of explicit variables for clarity, but the difference between your scrollHeight and scrollPosition never went to zero because the $(window).scrolltop was a float/double that never maxed out, at least in Chrome Version 68.0.3440.84 (Official Build) (64-bit). Here's my solution:

    $(window).on("scroll", function() {
        var docHeight = $(document).height();
        var winScrolled = $(window).height() + $(window).scrollTop(); // Sum never quite reaches
        if ((docHeight - winScrolled) < 1) {
            console.log("event " + "module scrolled to bottom" + " @Model.documentFilename @Model.requestorId");
        }
    });

All of these damn solutions do not work on mobile devices

thanks! my boss

Thanks! Work Good!

Thanks a lot!

works perfectly on desktop and mobile version!

works perfect, thank you!

Hi,
is not necessary to have this operation :
if ((scrollHeight - scrollPosition) / scrollHeight === 0) because it's mean that (scrollHeight - scrollPosition) === 0.
So it's better and simpler to write this :
if ( scrollHeight - scrollPosition === 0 ) { }
Because that' way you easily change your value limit like this
if( scrollHeight - scrollPosition < 20 ) { }
if you want somethings happen when the user is 20 pixels about to reach the page bottom.

awesome

For those who find that this script doesn't work, check this property in your HMTL file .. < !DOCTYPE html >. As I found out, this can cause the window and document to report the same value, which breaks this script. This happens specifically in Chrome. And, if the tag is present, but specifies a URL after it, it may be necessary to remove the URL, or change it.

Welcome to the sauce that is the never ending problem of a Universal Interface.

jquery $(window).height() == $(document).height()
https://stackoverflow.com/questions/12103208/jquery-window-height-is-returning-the-document-height

Does this work in mobile browser with responsive layout bootstrap?

Is it possible to pause between scrolls?

Does Not work on mobile

Will this work on mobile on tap?

but it does not works on the popup

awesome

Awesome.

Google Chrome gives the full height of the page if you call $(window).height()

Instead, use window.innerHeight to retrieve the height of your window.
Necessary check should be:

    if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
        console.log("reached bottom!");
    }

don't work on mobile devices.

NON JQUERY version

 let listContainer = document.getElementById('news_list_container');
    listContainer.addEventListener('scroll', function(e) {
      // https://stackoverflow.com/questions/876115/how-can-i-determine-if-a-div-is-scrolled-to-the-bottom
//       https://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery, 12px buffer to make this work properly
      if (listContainer.scrollTop >= (listContainer.scrollHeight - listContainer.offsetHeight - 12)) {
        console.log('we are at the bottom now', listContainer.scrollTop, listContainer.scrollHeight - listContainer.offsetHeight) ;
      }
    });

@areghunanyan - worked perfectly!