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

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