Usman Mutawakil Usman Mutawakil - 4 months ago 72
jQuery Question

Meaning of $(window).scrollTop() == $(document).height() - $(window).height()

The following code is used to detect if a user has scrolled to the bottom of the page and it works.

if($(window).scrollTop() == $(document).height() - $(window).height()){
//do something
}


Problem:

I don't understand why you subtract the height of the window from the height of the document, then compare that to the scroll height to determine whether or not the bottom of the page has been reached. Why isn't it simply

if($(window).scrollTop() == $(document).height()){
//do something
}


or

if($(window).scrollTop() == $(window).height()){
//do something
}

Answer

This is because $(window).scrollTop() returns the position of the top of the page, and $(document).height() returns the position of the bottom of the page. Therefore you need to subtract the height of the window to get the position to compare against, as this will give you the position where the top of the page would be if you were fully scrolled to the bottom.