9

Jqueryを使用してページの終わりを見つける方法はありますか？そうすれば、ページの終わりに到達したことを示す簡単なメッセージを表示できます。

4

7 に答える 7

18

ページの一番下にいることを確認する方法：

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

これは、ユーザーがページの一番下までスクロールしたときに「You're Done！Scroll toTopofPage」リンクでフェードインするjsFiddleの例です。

参照：

于 2010-09-27T00:45:28.957 に答える
6

これは機能し、IE 7、8、9、FF 3.6、Chrome 6、Opera10.6でテストしました

$(window).scroll(function()
{
    if (document.body.scrollHeight - $(this).scrollTop()  <= $(this).height())
    {
        alert('end');
    }
});
于 2010-09-26T20:49:06.067 に答える
2

上記の解決策が機能しない場合は、ドキュメントタイプを正しく設定しているかどうかを確認してください。

<!DOCTYPE HTML>

見つけるために私に1時間かかりました:)

于 2013-03-27T09:52:30.210 に答える
1

重複を避けるため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);

    }

});
于 2014-01-15T19:07:19.940 に答える
0

ブラウザを説明するために微調整が必​​要な場合がありますが、次のようにする必要があります。

$(document).scroll(function()
{
    var $body = $('body');
    if (($body.get(0).scrollHeight - $body.scrollTop) == $body.height())
    {
        // display your message
    }
});
于 2010-09-26T20:02:08.803 に答える
0

デバッグに関する注意：jquery-1.10.2.jsを使用して、ページの先頭（？）に戻ったときにアラートを受け取っていました。jquery-1.6.4.min.jsをロードし、すべてが順調です。

于 2014-04-25T16:13:01.947 に答える
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>
于 2021-09-22T10:39:26.857 に答える