Role para a parte inferior de Div no carregamento da página (jQuery)

Eu tenho uma div na minha página:

<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>

Como posso fazer a div rolar para a parte inferior da div? Não é a página, apenas o DIV.

As outras soluções aqui na verdade não funcionam para divs com muito conteúdo - ele "atinge o máximo" rolando para baixo até a altura da div (em vez da altura do conteúdo da div). Portanto, eles funcionarão, a menos que você tenha mais do que o dobro da altura da div no conteúdo.

Aqui está a versão correta:

$('#div1').scrollTop($('#div1')[0].scrollHeight);

ou versão do jQuery 1.6+:

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

Ou animado:

$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);

Todas as respostas que posso ver aqui, incluindo a atualmente "aceita", estão realmente erradas no que definem:

scrollTop = scrollHeight

Considerando que a abordagem correta é definir:

scrollTop = scrollHeight - clientHeight

Em outras palavras:

$('#div1').scrollTop($('#div1')[0].scrollHeight - $('#div1')[0].clientHeight);

Ou animado:

$("#div1").animate({
  scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);

ATUALIZAÇÃO: consulte a solução de Mike Todd para obter uma resposta completa.

$("#div1").animate({ scrollTop: $('#div1').height()}, 1000);

se você deseja que seja animado (mais de 1000 milissegundos).

$('#div1').scrollTop($('#div1').height())

se você quiser instantâneo.

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

Isso agarra a altura da página e a rola para baixo quando a janela é carregada. Altere 1000para o que for necessário, mais rápido / mais lento quando a página estiver pronta.

tente isto:

$('#div1').scrollTop( $('#div1').height() )

Role a janela para a parte inferior da div de destino.

function scrollToBottom(id){
  div_height = $("#"+id).height();
  div_offset = $("#"+id).offset().top;
  window_height = $(window).height();
  $('html,body').animate({
    scrollTop: div_offset-window_height+div_height
  },'slow');
}

scrollToBottom('call_div_id');

O seguinte irá funcionar. Observe [0]escrollHeight

$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);

para animar em jquery (versão> 2.0)

var d = $('#div1');
d.animate({ scrollTop: d.prop('scrollHeight') }, 1000);

Nada disso funcionou para mim, eu tenho um sistema de mensagens dentro de um aplicativo da web que é semelhante ao messenger do Facebook e queria que as mensagens aparecessem na parte inferior de uma div.

Isso funcionou muito bem, Javascript básico.

window.onload=function () {
     var objDiv = document.getElementById("MyDivElement");
     objDiv.scrollTop = objDiv.scrollHeight;
}

Estou trabalhando em uma base de código herdada tentando migrar para o Vue.

Na minha situação específica (div rolável envolvida em um modal de inicialização), um v-if mostrava novo conteúdo, para o qual eu queria que a página rolasse para baixo. Para que esse comportamento funcionasse, tive que esperar o vue concluir a nova renderização e usar o jQuery para rolar até a parte inferior do modal.

Assim...

this.$nextTick(function() {
    $('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})

Você pode usar o código abaixo para rolar para a parte inferior da div no carregamento da página.

$(document).ready(function(){
  $('div').scrollTop($('div').scrollHeight);
});

Você pode verificar scrollHeight e clientHeight com scrollTop para rolar para a parte inferior da div como no código abaixo.

$('#div').scroll(function (event) {
  if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop())) 
  {
    console.log("this is scroll bottom of div");
  }
  
});

Quando a página é carregada, a rolagem é o valor máximo.

Esta é uma caixa de mensagem quando o usuário envia uma mensagem e sempre mostra o bate-papo mais recente para baixo, para que o valor de rolagem seja sempre o máximo.

$('#message').scrollTop($('#message')[0].scrollHeight);

ver imagem