ansaurus

Question

How to show div when user reach bottom of the page?

Answer 1

+1 A:

$(document).scrollTop() should give you the position of scrollbar. you check that against document height. then fade in or out the div.

Funky Dude 2010-05-04 19:52:16

Answer 2

+1 A:

This must get you started:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2768264</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
        <script>
            $(document).ready(function() {
                $(window).scroll(function() {
                    if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
                        alert('Bottom reached!');
                    }
                });
            });    
        </script>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
        <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
        <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
        <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
    </body>
</html>

This assumes that body has a margin of 0. Else you'll need to add the top and bottom margin to the $('body').height().

BalusC 2010-05-04 20:10:33

Thanks but this doesnt work :(

Kenan 2010-05-04 20:34:23

Did you check the margins? I updated the answer to include an SSCCE.

BalusC 2010-05-04 20:40:50

Yea, margin is 0, I'm using CSS reset. And also Im using jQuery 1.3.2?

Kenan 2010-05-04 20:44:52

Hmm, you're right, it didn't work in Firefox (Editplus here has IE7 as builtin browser). The viewport is actually higher in FF. I'll investigate if that's to be expected. Update: funny, `body.onscroll` is not supported in FF.

BalusC 2010-05-04 20:47:06

I replaced `body.onscroll` by `window.onscroll` and `==` by `<=`.

BalusC 2010-05-04 20:53:10

I found misstake, it should be: $(window).scroll not $('body') Thanks

Kenan 2010-05-04 20:53:40

Is there anyway to show content when user reach bottom-200px, for example. So not exactly the bottom, rather than 200px before? Thanks one more time

Kenan 2010-05-04 21:18:23

Substract the body height with this value.

BalusC 2010-05-04 21:21:56

ansaurus

tags:

views:

answers:

How to show div when user reach bottom of the page?

related questions