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

Question

When user scrolls to the bottom of the page I want to show some div, with jQuery of course. And if user scrolls back to he top, div fade out. So how to calculate viewport (or whatever is the right name) :)

Thanks

are you talking about a div that will have a position:fixed; or a div that is just at the bottom of the content? — codedude, May 04 '10 at 19:18
it will be fixed position at the bottom of the page, maybe "bottom:50px" — Kenan, May 04 '10 at 19:23

BalusC · Accepted Answer · 2010-05-04T20:52:36.093

14

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"></script>
        <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().

edited May 04 '10 at 20:52

answered May 04 '10 at 20:10

BalusC

1,082,665
372
3,610
3,555

Did you check the margins? I updated the answer to include an SSCCE. – BalusC May 04 '10 at 20:40
Yea, margin is 0, I'm using CSS reset. And also Im using jQuery 1.3.2? – Kenan May 04 '10 at 20:44
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 May 04 '10 at 20:47
I replaced `body.onscroll` by `window.onscroll` and `==` by `<=`. – BalusC May 04 '10 at 20:53
I found misstake, it should be: $(window).scroll not $('body') Thanks – Kenan May 04 '10 at 20:53
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 May 04 '10 at 21:18
Substract the body height with this value. – BalusC May 04 '10 at 21:21
awesome! from this code it's possible to develop also something similar like on facebook or twitter. awesome! wonderful :) – Jun 13 '12 at 08:27
2

You could better use `$(document).height()` instead of `$('body').height()`. The body returned me the wrong height in my design. – Sven van Zoelen Feb 14 '13 at 11:02

score 8 · Answer 2 · answered Mar 21 '13 at 20:17

8

You can use the following:

$(window).scroll(function() {
    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) {
        //Bottom Reached
    }
});

I use this because i have

body {
    height:100%;
}

Hope this helps

answered Mar 21 '13 at 20:17

David Passmore

6,089
4
46
70

Thank you, I was exactly in the same case. Your solution worked for me ! – Adrien Apr 04 '14 at 17:10
@Adrien You're welcome my friend. Glad I could help :) – David Passmore Apr 09 '14 at 11:58

score 3 · Answer 3 · answered Mar 20 '12 at 03:18

Here's a small edit on the BalusC's code if you want to show a div not a javascript popup:

<head>
    <title>SO question 2768264</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function() {
            $(window).scroll(function() {
                if ($("body").height() <= ($(window).height() + $(window).scrollTop())) {
                    $("#hi").css("display","block");
                }else {
                    $("#hi").css("display","none");
                }
            });
        });
    </script>
    <style>
        body { margin: 0; }
        #hi {
          background: red; color: #FFF; position: fixed; bottom: 0px; right: 0px; display: none;
        }


    </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

    <div id="hi">HIIIIIIIIIIII</div>
</body>

Hi. Let's say instead of "body" I'm using a div ID and what if I want the "hi" to appear when I'm at 80% of the scrolled div, for example? :) Vote up will pay a good answer :) — , Jun 13 '12 at 13:11

score 2 · Answer 4 · answered May 04 '10 at 19:52

2

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

answered May 04 '10 at 19:52

Funky Dude

3,867
2
23
33

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

4 Answers4

Linked