jQuery Role até o final da página / iframe


224

Como uso o jquery para rolar até a parte inferior de um iframe ou página?

Respostas:


360

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.


48
Isso funciona no Firefox 3.5.7, mas não no Chrome 4.0.295.0. O seguinte funciona no Chrome: $ ('html, body'). Animate ({scrollTop: $ (document) .height ()}, 'slow');
Tom

1
@ Tom, não consigo identificar a diferença entre sua solução e a de Mark!
Muhammad Gelbana

4
@MuhammadGelbana verifique a data de edição. Parece que Mark atualizou sua resposta para incluir a correção de Tom.
Paul Parker

Há realmente não há necessidade de obter a altura do elemento: stackoverflow.com/a/44578849/1450294
Michael Scheper

210

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

29
Essa deve ser a resposta aceita, Tom está absolutamente certo, a resposta aceita não funciona muito bem, pois o pergaminho para abruptamente em vez de processar o final do relaxamento.
Christian

33
Nota: easeOutQuintrequer um plug-in, o próprio jQuery possui apenas lineare swing.
Newenglander

cara isso é uma coisa boa! obrigado. mesmo fazer isso com 'swing' em vez de 'facilidade de ponto' mostra diferenças notáveis ​​'.
Jesse Head

Não tenho certeza se é uma forma incorreta, mas editei a resposta aceita para adicionar um ponteiro para esta resposta. Se for, alguém pode revertê-lo.
Xaxxon 8/15

Essa solução funciona apenas se a página for interpretada no modo compatível com o padrão. Por exemplo, se você não incluir o <!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/…
VKK

35

Por exemplo:

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

Parece que não consigo fazer isso funcionar. Não faz nada.
Adam

@adam Qual versão do jQuery você está usando?
Sonny Boy

14

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:

Alternativa em planetcloud

Como eu já tinha uma versão em cache do meu objeto jQuery (o myPanelcó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)


1
Trabalhou para mim com uma div:var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());
gregn3

Você realmente tem que fazer as contas? stackoverflow.com/a/44578849/1450294
Michael Scheper

4

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() );
}

2
Não sei por que, mas isso não funcionou para mim no Firefox 26.0 e rolaria para o topo quando essa função fosse executada. Este problema foi resolvido dizendo$(document).scrollTop($(document).height());
Jack

2

Este funcionou para mim:

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

Isso não responde à pergunta #
018 huyz

2

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 scrollTopum 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();

0

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.


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

Eu uso esse código para rolar o bate-papo quando novas mensagens chegarem.


Por favor, inclua algumas explicações para o seu código, especialmente quando você copia da sua própria base de código, usando classes CSS que não são relevantes para outras pessoas;)
Bruno Monteiro

Pegue qualquer bloco com uma barra de rolagem;) ou o documento inteiro.
Александр Лиссов
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.