Respostas:
Se você deseja uma boa rolagem de animação lenta, qualquer âncora com href="#bottom"
isso rolará você até o final:
$("a[href='#bottom']").click(function() {
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
return false;
});
Sinta-se livre para alterar o seletor.
scrollTop () retorna o número de pixels ocultos da área de rolagem, fornecendo-o:
$(document).height()
realmente ultrapassará a parte inferior da página. Para que a rolagem realmente 'pare' na parte inferior da página, a altura atual da janela do navegador precisa ser subtraída. Isso permitirá o uso de atenuação, se necessário, tornando-se:
$('html, body').animate({
scrollTop: $(document).height()-$(window).height()},
1400,
"easeOutQuint"
);
easeOutQuint
requer um plug-in, o próprio jQuery possui apenas linear
e swing
.
<!DOCTYPE html>
no Chrome, o Chrome retornará exatamente o mesmo valor para a altura da janela e do documento; nesse caso $(document).height()-$(window).height()
, sempre retornará 0. Consulte aqui: stackoverflow.com/questions/12103208/…
Depois que esse tópico não funcionou para minha necessidade específica (rolar dentro de um elemento específico, no meu caso, uma área de texto), descobri isso muito além, o que pode ser útil para alguém que está lendo esta discussão:
Como eu já tinha uma versão em cache do meu objeto jQuery (o myPanel
código abaixo é o objeto jQuery), o código que adicionei ao meu manipulador de eventos era simplesmente este:
myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());
(obrigado Ben)
var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());
Uma função simples que pula (rola instantaneamente) para a parte inferior da página inteira. Ele usa o built-in .scrollTop()
. Não tentei adaptar isso para trabalhar com elementos de página individuais.
function jumpToPageBottom() {
$('html, body').scrollTop( $(document).height() - $(window).height() );
}
$(document).scrollTop($(document).height());
Este funcionou para mim:
var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
// We're at the bottom.
}
Se você não se importa com animação, não precisa obter a altura do elemento. Pelo menos em todos os navegadores que tentei, se você der scrollTop
um número maior que o máximo, ele irá rolar até o final. Então, dê o maior número possível:
$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);
Se você quiser rolar a página, em vez de algum elemento com uma barra de rolagem, basta myScrollingElement
igual a 'body, html'.
Como eu preciso fazer isso em vários lugares, escrevi uma função jQuery rápida e suja para torná-la mais conveniente, assim:
(function($) {
$.fn.scrollToBottom = function() {
return this.each(function (i, element) {
$(element).scrollTop(Number.MAX_SAFE_INTEGER);
});
};
}(jQuery));
Então eu posso fazer isso quando adiciono um monte de coisas:
$(myScrollingElement).append(lotsOfHtml).scrollToBottom();
Os scripts mencionados nas respostas anteriores, como:
$("body, html").animate({
scrollTop: $(document).height()
}, 400)
ou
$(window).scrollTop($(document).height());
não funcionará no Chrome e será agitado no Safari , caso a html
tag no CSS tenha a overflow: auto;
propriedade definida. Levei quase uma hora para descobrir.
$('.block').scrollTop($('.block')[0].scrollHeight);
Eu uso esse código para rolar o bate-papo quando novas mensagens chegarem.