Develop Reference

Cannot Detect When User Scrolls to the Bottom of Page

I am using the following code to detect when a user scrolls to the bottom of the page:
$(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
}
});
However, instead of telling me when I scroll to the bottom of the page, the if statement becomes true when I scroll all the way to the top. Why is this happening? Thanks so much. The reason I need to detect when the user scrolls to the bottom is so that I can dynamically load content from a server. I don't think this matter, but I am using Flask on the backend and the malfunctioning page is rendered as a template with jinja-2.

_onScrollHandler(event){
if(event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight){
console.log('Reacehd Bottom')
}
}
Call this function when onscroll event occurs and from event arg you can get the scrollHeight scrollTop and clientheight.
Please try with this one

Jquery ajax infinite scroll exclude footer height

I'm working on ajax infinite scroll. I have below code to make ajax request after scrolling at end,
$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height())){
loadlist();
}
});
But it fires when scrolled at end (including footer.). But I want it fired when the footer is just starting to show while scrolling (footer height is 300px).
I researched and tried following code,
$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height()) - 300){ // 300px footer height
loadlist();
}
});
But It seems dirty. the function gets fired too many times when scrolling. any good solutions ?

I'd take the approach of triggering the behaviour when your footer element first scrolls into view.
var $footer = $("#my-footer");
$(window).scroll( function() {
if (isScrolledIntoView($footer) ) loadList();
});
See Check if element is visible after scrolling to get the code for isScrolledIntoView().

Scroll to certain height of a page javascript

I've a very simple one line code that checks whether user has scrolled to the bottom of the page, I want to change it a little bit & find whether user has reached the footer of the page. And height of footer is somewhat 350px.
Here's my code:
if($(window).scrollTop() + $(window).height() == ($(document).height())
{
...
}
This works like a charm (loads more content on scroll event), but if I do like this:
if($(window).scrollTop() + $(window).height() == ($(document).height()-350))
This doesn't work. When I attempt to alert('$(document).height()-350'). It gives a perfect alert.
Can anyone say what I'm doing wrong?

you are probably scrolling more than 1 pixel at a time and just skip the equality point. make it a >= and it should work:
if($(window).scrollTop() + $(window).height() >= ($(document).height()-350))

Try
if($(window).scrollTop() + $(window).height() >= $(document).height()-350)
Also you have '(' char in front of $(document).height() which needs to be removed

You want to use >= instead of ==, otherwise you must be pixel-perfect in your scroll in order for the event to fire.
Give this a try. You can use the .offset().top of your footer element to get the Y-position relative to the document.
var scrollBottom = $(window).scrollTop() + $(window).height();
var footerTop = $('#footer').offset().top; // change selector as needed
if ( scrollBottom >= footerTop ) {
alert("hello footer");
}

"infinite scroll" code working only for top scrolling

I'm using a "universal" piece of js that should detect if the user has scrolled to the bottom of the document:
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
//ajax code here
}
});
As the user scrolls, new content should load via the ajax call.
I would have expected the code to fire when I scroll DOWN, but the condition is actually firing when I scroll back to the TOP of the page, so it's basically doing the opposite of what it's "supposed" to do.
I've seen this solution being used in many examples, such as:
https://stackoverflow.com/a/17078097/1623095
My debugging messages:
console.log($(window).scrollTop());
console.log($(document).height());
console.log($(window).height());
These output when scrolling to the top:
0
1956
1956
And bottom:
961
1956
1956
The only plugin being loaded in my page is jquery (1.10.0.min), due to the nature of the project, I cannot link to the page.
Thoroughly confused by the dom behavior here.

I solved this some time before for someone else.
Have a look here:
Code
$(window).scroll(function () {
//- 10 = desired pixel distance from the bottom of the page while scrolling)
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
var box = $("#scrollbox");
//Just append some content here
box.html(box.html() + "<br />fa");
}
});
Fiddle
Just place your ajax code where I extended the content with simple html breaks

Is there a way for JS to detect that the bottom of a div has been reached, rather than the bottom of a page?

I'm using this at the moment:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$(".initial").delay(2000).fadeOut("slow", function() {
$(".secondary").fadeIn("slow");
});
}
});
And I've tried fiddling around with window and replacing it with div names and static pixel values for the scroll to no avail.

Yes. Replace $(document).height() by ($(elem).offset().top+$(elem).outerHeight())