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.