jQuery Scorri fino alla fine della pagina / iframe


224

Come posso usare jquery per scorrere fino alla fine di un iframe o di una pagina?

Risposte:


360

Se vuoi un piacevole scorrimento lento dell'animazione, per qualsiasi ancora con href="#bottom"questo ti scorrerà verso il basso:

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

Sentiti libero di cambiare il selettore.


48
Funziona con Firefox 3.5.7 ma non con Chrome 4.0.295.0. Il seguente funziona in Chrome: $ ('html, body'). Animate ({scrollTop: $ (document) .height ()}, 'slow');
Tom,

1
@ Tom, non riesco a individuare la differenza tra la tua soluzione e quella di Mark!
Muhammad Gelbana,

4
@MuhammadGelbana controlla la data di modifica. Sembra che Mark abbia aggiornato la sua risposta per includere la correzione di Tom.
Paul Parker,

In realtà non è necessario ottenere l'altezza dell'elemento: stackoverflow.com/a/44578849/1450294
Michael Scheper

210

scrollTop () restituisce il numero di pixel nascosti alla vista dall'area scorrevole, fornendo così:

$(document).height()

supererà effettivamente la parte inferiore della pagina. Affinché lo scorrimento si "fermi" nella parte inferiore della pagina, è necessario sottrarre l'altezza corrente della finestra del browser. Ciò consentirà l'uso di allentamento se necessario, quindi diventa:

$('html, body').animate({ 
   scrollTop: $(document).height()-$(window).height()}, 
   1400, 
   "easeOutQuint"
);

29
Questa dovrebbe essere la risposta accettata, Tom ha assolutamente ragione, la risposta accettata non funziona bene poiché lo scroll si interromperà bruscamente invece di elaborare la fine dell'allentamento.
Christian,

33
Nota: easeOutQuintrichiede un plug-in, jQuery ha solo lineare swing.
newenglander

amico questa è roba buona! Grazie. anche farlo con 'swing' invece di 'easoutquint' mostra differenze evidenti '.
Jesse Head,

Non sono sicuro che sia una forma errata, ma ho modificato la risposta accettata per aggiungere un puntatore a questa risposta. Se lo è, allora qualcuno può ripristinarlo.
xaxxon,

Questa soluzione funziona solo se la pagina viene interpretata in modalità conforme a uno standard. Ad esempio, se non includi <!DOCTYPE html>su Chrome, Chrome restituirà lo stesso valore esatto per la finestra e l'altezza del documento, nel qual caso $(document).height()-$(window).height()restituirà sempre 0. Vedi qui: stackoverflow.com/questions/12103208/…
VKK

35

Per esempio:

$('html, body').scrollTop($(document).height());

Non riesco a farlo funzionare. Non fa assolutamente niente.
Adam,

@adam Quale versione di jQuery stai usando?
Sonny Boy,

14

Dopo che questa discussione non ha funzionato per me per le mie esigenze specifiche (scorrendo all'interno di un elemento particolare, nel mio caso una textarea) l'ho scoperto nel grande oltre, il che potrebbe rivelarsi utile a qualcun altro che legge questa discussione:

Alternativa su planetcloud

Dal momento che avevo già una versione cache del mio oggetto jQuery (il myPanelseguente codice è l'oggetto jQuery), il codice che ho aggiunto al mio gestore eventi era semplicemente questo:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

(grazie Ben)


1
Ha funzionato per me con un div:var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());
gregn3


4

Una semplice funzione che salta (scorre istantaneamente) fino alla fine di tutta la pagina. Utilizza il built-in .scrollTop(). Non ho provato ad adattarlo per lavorare con singoli elementi della pagina.

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}

2
Non so perché, ma questo non ha funzionato per me su Firefox 26.0 e sarebbe scorrere verso l'alto quando è stata eseguita questa funzione. Questo problema è stato risolto dicendo$(document).scrollTop($(document).height());
Jack

2

Questo ha funzionato per me:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

Questo non risponde alla domanda
huyz,

2

Se non ti interessa l'animazione, non devi ottenere l'altezza dell'elemento. Almeno in tutti i browser che ho provato, se dai scrollTopun numero maggiore del massimo, scorrerai fino in fondo. Quindi dagli il maggior numero possibile:

$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);

Se vuoi scorrere la pagina, piuttosto che qualche elemento con una barra di scorrimento, rendi myScrollingElementuguale a 'body, html'.

Dato che devo farlo in diversi punti, ho scritto una funzione jQuery veloce e sporca per renderlo più conveniente, in questo modo:

(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));

Quindi posso farlo quando aggiungo un sacco di cose:

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();

0

Gli script citati nelle risposte precedenti, come:

$("body, html").animate({
    scrollTop: $(document).height()
}, 400)

o

$(window).scrollTop($(document).height());

non funzionerà in Chrome e sarà instabile in Safari nel caso in cui il html tag CSS abbia le overflow: auto;proprietà impostate. Mi ci è voluta quasi un'ora per capire.


0
$('.block').scrollTop($('.block')[0].scrollHeight);

Uso questo codice per scorrere la chat quando arrivano nuovi messaggi.


Per favore includi qualche spiegazione per il tuo codice, specialmente quando copi dalla tua base di codice, usando classi CSS che non sono rilevanti per altre persone;)
Bruno Monteiro

Prendi qualsiasi blocco con una barra di scorrimento;) o l'intero documento.
Александр Лиссов
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.