ページの終了時にスクロールするときにjQueryを使用してアラートします

StackOverflow https://stackoverflow.com/questions/3799542

  •  05-10-2019
  •  | 
  •  

質問

jQueryを使用してページ端を調べる方法はありますか。そうすれば、ページの終わりに到達したという簡単なメッセージを表示できます。

役に立ちましたか？

解決

あなたがページの一番下にいるときに見分ける方法: 

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の例です ユーザーがページの下部にスクロールしたときに、「完了です！ページの上部にスクロールする」リンクでフェードします。

参考文献：

他のヒント

これは機能し、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');
    }
});

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

<!DOCTYPE HTML>

調べるのに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);

    }

});

ブラウザを説明するには調整が必要かもしれませんが、このようなことは次のことをする必要があります。

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top