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"
);
easeOutQuintrichiede un plug-in, jQuery ha solo lineare 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 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)
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 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();
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.