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?

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?

• javascript

• Looks like you are missing some brackets () – 6ton Commented Jul 29, 2014 at 17:11
• 3 you are probably scrolling more than 1 pixel at a time and just skip the equality point. make it a >= and it should work – Banana Commented Jul 29, 2014 at 17:12
• @Banana That was a pretty awesome thing, it worked, thanks a lot :) – Guy in the chair Commented Jul 29, 2014 at 17:13
• Is there any margin on the footer? What you're checking for is very exact, should use >= as suggested above. – Anthony Chu Commented Jul 29, 2014 at 17:13
• You can ment this as an answer & I will gladly accept it. – Guy in the chair Commented Jul 29, 2014 at 17:13

3 Answers 3

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");
}