Оповещение с использованием Jquery при прокрутке до конца страницы - PullRequest
Новая
       25

Оповещение с использованием Jquery при прокрутке до конца страницы

9 голосов
/ 26 сентября 2010

Есть ли способ узнать конец страницы с помощью Jquery, чтобы можно было отобразить простое сообщение о том, что вы достигли конца страницы.

Ответы [ 6 ]

18 голосов
/ 27 сентября 2010

Как определить, когда вы находитесь внизу страницы : 

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 , который исчезает в ссылке «Все готово! Прокрутка вверх», когда пользователь прокручивает довнизу страницы.

Список литературы:

6 голосов
/ 27 сентября 2010

Это будет работать, и я протестировал его в 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');
    }
});
2 голосов
/ 27 марта 2013

Если приведенные выше решения не работают, проверьте, правильно ли вы указали тип документа: 

<!DOCTYPE HTML>

У меня ушел час, чтобы узнать:)

1 голос
/ 15 января 2014

Чтобы избежать дублирования 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);

    }

});
0 голосов
/ 25 апреля 2014

Примечание для отладки: я получал предупреждение при возврате в начало страницы (?) С помощью jquery-1.10.2.js.Загружен jquery-1.6.4.min.js и все хорошо.

0 голосов
/ 27 сентября 2010

Может потребоваться настройка для учета браузеров, но что-то вроде этого должно сделать: 

$(document).scroll(function()
{
    var $body = $('body');
    if (($body.get(0).scrollHeight - $body.scrollTop) == $body.height())
    {
        // display your message
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...