Risposte:
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.
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"
);
easeOutQuint
richiede un plug-in, jQuery ha solo linear
e swing
.
<!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/…
Per esempio:
$('html, body').scrollTop($(document).height());
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:
Dal momento che avevo già una versione cache del mio oggetto jQuery (il myPanel
seguente 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)
var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());
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() );
}
$(document).scrollTop($(document).height());
Questo ha funzionato per me:
var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
// We're at the bottom.
}
Se non ti interessa l'animazione, non devi ottenere l'altezza dell'elemento. Almeno in tutti i browser che ho provato, se dai scrollTop
un 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 myScrollingElement
uguale 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();
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.
$('.block').scrollTop($('.block')[0].scrollHeight);
Uso questo codice per scorrere la chat quando arrivano nuovi messaggi.