CODEWITHSUNDEEP
javascriptjquery
ragebiswas
ragebiswas

Reputation: 3878

How to determine if we're at the bottom of a page using Javascript/jQuery

There is nothing called scrollBottom() in jQuery, so I can't do $(window).scrollBottom()==0

Hope the question is clear from the title itself. Any help would be greatly appreciated. I'm mostly interested in IE7+, FF3.5+ (Chrome etc are bonus!)

Thanks!

Upvotes: 1

Views: 1672

Answers (3)

Sandeepan Nath
Sandeepan Nath

Reputation: 10284

Check if this works

http://jsfiddle.net/sandeepan_nits/3Ys35/2/

I compared the e.pageY and $(document).height() but the fiddle example does not work accurately for all browsers and there is an offset problem. If I set an offset of 1 it works fine in ff.

If nothing else works perfect you may set different offsets based on browsers (IEs will need separate and others separate probably) or else replace the equal condition ( if(e.pageY == ($(document).height() - offset)) ) with a range check ( if((e.pageY < ($(document).height() + upperLimit)) && (e.pageY > ($(document).height() + lowerLimit))) ) if that is ok as per your requirement.

Upvotes: 2

annakata
annakata

Reputation: 75794

<ironic>Use javascript.</ironic>

Browser support for this is a mixed bag. Non-IE you can use window.pageYOffset, with IE you have to use either document.body.scrollTop or document.documentElement.scrollTop depending on the browser version and compatability mode.

You may have to do some varying levels of mathematical manipualtion to the results - I don't have access to multiple browsers to test at work (I know) and I can't recall the detail of how these work offhand.

Upvotes: 2

stoefln
stoefln

Reputation: 14556

you could use this function to check whether an element is visible (e.g. a element at the bottom of the page):

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

I implemented an endless scrolling effect (like in facebook) with it.

you can check each time, the user is scrolling the window:

function checkAndLoad(){
    if(isScrolledIntoView($('#footer'))){
        triggerSomething(); // 
    }
}
$(document).ready(function(){
    checkAndLoad();
    $(window).scroll(function(){
        checkAndLoad();
    });
});

Upvotes: 2

Related Questions