2010-09-26 13 views
9

C'è un modo per scoprire fine pagina utilizzando jQuery, in modo che un semplice messaggio può essere visualizzato dicendo che avete raggiunto la fine della pagina.Alert utilizzando jQuery quando Scorrere fino alla fine della pagina

+0

possibile duplicato di [Determinazione quando si scorre in fondo a una pagina con Javascript] (http://stackoverflow.com/questions/2817042/determining-when-scrolled-to-bottom-of-a-page-with-javascript) –

risposta

18

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

Naturalmente si desidera a fuoco quanto sopra ogni volta che l'utente scorre:

$(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 che sfuma in un "gioco è fatto! . Scorrere fino a Top of del link" quando l'utente ha fatto scorrere la parte inferiore della pagina

Riferimenti:

+1

Questo non funziona per me. Vi consiglio la risposta accettata a questa domanda SO: http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom –

+0

@ Ryan - fa la jsFiddle non funziona per te? Quale browser utilizzate? –

0

E potrebbe essere necessario tweaking per tenere conto di browser, ma qualcosa di simile dovrebbe fare:

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

Questo funziona e ho testato in IE 7,8,9, FF 3.6, Chrome 6 e Opera 10.6

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

Se le soluzioni di cui sopra non funzionano si prega di controllare se si imposta il tipo di documento a destra:

<!DOCTYPE HTML> 

me voluta un'ora per scoprire :)

1

Per evitare duplicati console.log('end of page'), è necessario creare un setTimeout, come questo:

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

In alternativa, è possibile rimuovere il listener di eventi dopo la prima esecuzione corretta (console.log) –

0

Nota per il debug: mi è stato sempre l'allarme sul ritorno alla parte superiore della pagina utilizzando jquery-1.10.2.js (?). Caricato jquery-1.6.4.min.js e tutto va bene.

Problemi correlati