当前位置：文江博客话题详情

滚动到页面末尾时使用 Jquery 发出警报

发布于 2024-09-25 03:58:55 字数 58 浏览 5 评论 0原文

有没有一种方法可以使用 Jquery 找出页面末尾，以便可以显示一条简单的消息，表明您已到达页面末尾。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

榆西 2024-10-02 03:58:59

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

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

回复收藏 0 原文

装迷糊 2024-10-02 03:58:58

这将起作用，我在 IE 7,8,9，FF 3.6，Chrome 6 和 Opera 10.6 中测试了它

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

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 原文

简单 2024-10-02 03:58:58

如果上述解决方案不起作用，请检查您的文档类型是否设置正确：

<!DOCTYPE HTML>

我花了一个小时才找到答案:)

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 原文

清晨说晚安 2024-10-02 03:58:58

为了避免重复的 console.log('end of page')，您需要创建一个 setTimeout，如下所示：

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

    }

});

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 原文

此岸叶落 2024-10-02 03:58:58

它可能需要调整以适应浏览器，但应该这样做：

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

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 原文

黯淡〆 2024-10-02 03:58:58

调试注意事项：我在返回页面顶部时收到警报（？）
jquery-1.10.2.js。加载 jquery-1.6.4.min.js 一切都很好。

回复收藏 0 原文

空袭的梦i 2024-10-02 03:58:57

如何判断您何时位于页面底部：

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.");
}

当然，您希望在用户滚动时触发上述内容：

$(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.");
    }
});

这是一个 jsFiddle 示例，当用户滚动到页面底部时，该示例会淡出“您已完成！滚动到页面顶部”链接。

参考文献：

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:

回复收藏 0 原文

~没有更多了~