jQuery Scroll Para o final da página

196

Depois que minha página terminar de carregar. Eu quero que o jQUery role bastante para a parte inferior da página, animando rapidamente, não um estalo / solavanco.

Preciso de um plugin como ScrollToesse? ou isso é construído em jQuery de alguma forma?

jquery jquery-plugins Um aprendiz
fonte

Respostas:

416

Você pode apenas animar para rolar a página animando a scrollToppropriedade, sem necessidade de plug-in, como este:

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

Observe o uso de window.onload(quando as imagens são carregadas ... que ocupam altura) em vez de document.ready.

Para estar tecnicamente correto, você precisa subtrair a altura da janela, mas o acima funciona:

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

Para rolar para um ID específico, use o .scrollTop()seguinte:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);
Nick Craver
fonte
2
Outra questão, é quando ele parece feito, e então os trys usuário para Enrole-se, por um pouco ele está bloqueado, e faz um efeito muito sacudindo, impedindo que o usuário rolar para cima
AnApprentice
1
@ AnApprentice - Isso ocorre porque acontece rapidamente (400 ms por padrão), eu recomendaria apenas uma rolagem rápida para aliviar esse problema.
Nick Craver
3
O bloqueio é porque a distância está desativada. Está animando além da animação visível.
21710 Joshua Ruddell
27
@ NickCraver - com a versão mais recente do jQuery .scrollTop () parece não funcionar para rolar para um ID específico; com .offset (). top deve funcionar: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);
Paolo Gibellini
3
Esta resposta precisa ser editada. $(document).height()é um valor muito alto para a scrollToppropriedade, você pode perceber isso pela flexibilização. Eu acho que $(document).height() - window.innerHeightdeveria ficar bem.
silvenon
22

algo assim:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);
Josiah Ruddell
fonte
Tentei atualizar o destino para .write-comment e não funcionou. Talvez porque isso está sendo injetado na página?
AnApprentice
16 
$('html,body').animate({ scrollTop: 9999 }, 'slow');

Tão simples como isso, 9999 páginas de altura ... grande variedade para que possa chegar ao fundo.

Alin Razvan
fonte
1
Isso não é perfeito, pois em alguns casos, mesmo que raro, pode haver páginas mais longas do que isso, especialmente páginas que carregam conteúdo ilimitado dinamicamente. Isso interromperá a rolagem no meio do caminho.
Akhil Gupta
13

Você pode tentar isso 

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
Sarath Ak
fonte
10 
$("div").scrollTop(1000);

Funciona para mim. Rola para baixo.

f123
fonte
13
Não se a sua página tiver mais de 1000 px.
Volomike
4

Os scripts mencionados nas respostas anteriores, como:

$("body, html").animate({
    scrollTop: $(document).height()
}, 400)

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.

Ilia Rostovtsev
fonte
3

Usando 'document.body.clientHeight', você pode obter a altura vista dos elementos do corpo 

$('html, body').animate({
    scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);

isso rola no id 'particularDivision'

Anbu
fonte
1

Para o jQuery 3, altere

$ (window) .load (function () {$ ("html, body"). animate ({scrollTop: $ (documento) .height ()}, 1000);})

para:

$ (window) .on ("carga", função (e) {$ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000);})

Adnan Tahir
fonte
1 
function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

Esta é a solução que eu trabalho e você encontra, tenho certeza

Roshan Madusanka
fonte
0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
codeskyblue
fonte
Embora esse código possa ajudar a resolver o problema, ele não explica por que e / ou como responde à pergunta. Fornecer esse contexto adicional melhoraria significativamente seu valor educacional a longo prazo. Por favor edite sua resposta para adicionar explicação, incluindo o que limitações e premissas se aplicam.
Toby Speight
0 
$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

Esta solução funcionou para mim. Está funcionando rapidamente no Page Scroll Down.

Vikram Venkatesh
fonte
0 
var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

Assim, quando a página é aberta, ela é rolada automaticamente para baixo após 1 milissegundo

WapShivam
fonte