Alert using Jquery when Scroll to end of Page

Question

Is there a way to find out page end using Jquery, so that a simple message can be displayed saying you have reached end of the page.

possible duplicate of [Determining when scrolled to bottom of a page with Javascript](http://stackoverflow.com/questions/2817042/determining-when-scrolled-to-bottom-of-a-page-with-javascript) — Peter Ajtai, Sep 27 '10 at 00:56

score 18 · Accepted Answer · edited May 23 '17 at 12:16

How to tell when you're at the bottom of a page:

if (  document.documentElement.clientHeight + 
      $(document).scrollTop() >= document.body.offsetHeight )
{ 
    // Display alert or whatever you want to do when you're 
    //   at the bottom of the page. 
    alert("You're at the bottom of the page.");
}

Of course you want to fire the above whenever the user scrolls:

$(window).scroll(function() {
    if (  document.documentElement.clientHeight + 
          $(document).scrollTop() >= document.body.offsetHeight )
    { 
        // Display alert or whatever you want to do when you're 
        //   at the bottom of the page. 
        alert("You're at the bottom of the page.");
    }
});

Here is a jsFiddle example that fades in a "You're Done! Scroll to Top of Page" link when the user has scrolled to the bottom of the page.

References:

This doesn't work for me. I recommend the accepted answer to this SO question: http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom — Ryan Burney, Jul 10 '13 at 19:54
@Ryan - Does the jsFiddle not work for you? What browser are you using? — Peter Ajtai, Jul 10 '13 at 20:57

score 6 · Answer 2 · answered Sep 26 '10 at 20:49

6

This will work and I tested it in IE 7,8,9 , FF 3.6, Chrome 6 and Opera 10.6

$(window).scroll(function()
{
    if (document.body.scrollHeight - $(this).scrollTop()  <= $(this).height())
    {
        alert('end');
    }
});

answered Sep 26 '10 at 20:49

Matthew Manela

16,572
3
64
66

score 2 · Answer 3 · answered Mar 27 '13 at 09:52

2

If the above solutions don't work please check if you set your document type right:

<!DOCTYPE HTML>

Took me an hour to find out :)

answered Mar 27 '13 at 09:52

Denny Beulen

123
2
13

score 1 · Answer 4 · answered Jan 15 '14 at 19:07

1

To avoid duplicate console.log('end of page'), you need create a setTimeout, like this:

var doc = $(document), w = $(window), timer;

doc.on('scroll', function(){

    if(doc.scrollTop() + w.height() >= doc.height()){

        if(typeof timer !== 'undefined') clearTimeout(timer);

        timer = setTimeout(function(){
            console.log('end of page');
        }, 50);

    }

});

answered Jan 15 '14 at 19:07

gersonlimadev

309
2
5

Alternatively you could remove the event listener after the first successful execution (console.log) – Mike Causer Jan 16 '14 at 04:48

score 0 · Answer 5 · answered Apr 25 '14 at 16:13

0

Note for debugging: I was getting the alert on return to the top of the page(?) using jquery-1.10.2.js. Loaded jquery-1.6.4.min.js and all is well.

answered Apr 25 '14 at 16:13

openquestions

99
3
17

score 0 · Answer 6 · answered Sep 26 '10 at 20:02

It might need tweaking to account for browsers, but something like this should do:

$(document).scroll(function()
{
    var $body = $('body');
    if (($body.get(0).scrollHeight - $body.scrollTop) == $body.height())
    {
        // display your message
    }
});

zaid kherani · Answer 7 · 2021-09-23T05:31:06.997

0

 <script>
    $(document).ready(function(){
         var a = 1;
         
         //this function triggers whenever scroll is detected
         window.addEventListener("scroll", function(){
            
           //this condition is used to trigger alert only once
            if(a == 1){  

                //this condition check whether user scrolled to the 
                //bottom of the page or not
                if(($(document).height()-2) <= 
                scrollY+$(window).height() ){
                     alert('end of the page');
                     a = 0;
                 }
            }
      })
    });
</script>

edited Sep 23 '21 at 05:31

answered Sep 22 '21 at 10:39

zaid kherani

1
1

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Adrian Mole Sep 22 '21 at 14:51

Alert using Jquery when Scroll to end of Page

7 Answers7

Linked