发表新帖
发表新帖

Alert using Jquery when Scroll to end of Page

后端 未结
关注
6 1730
余生分开走
余生分开走 2020-12-31 15:43

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.

相关标签:
6条回答
  • 清歌不尽
    2020-12-31 15:47

    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');
    }
});
    0 讨论(0)
  • 情话喂你
    2020-12-31 15:47

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

    }

});
    0 讨论(0)
  • 不要未来只要你来
    2020-12-31 15:48

    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
    }
});
    0 讨论(0)
  • 小蘑菇
    2020-12-31 15:57

    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.

    0 讨论(0)
  • 一向
    2020-12-31 16:07

    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:

    • .scroll()
    • .scrollTop()
    • offsetHeight
    • clientHeight
    0 讨论(0)
  • 感动是毒
    2020-12-31 16:10

    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 :)

    0 讨论(0)
 看不清?
提交回复
热议问题