Oi, meninos da SO! Tudo bem?
Preciso da ajudinha de vocês com JQuery para que a barra de rolagem da div "conteudo2" role até o fim quando clicar no botão "Abrir".
Simples, né? O problema é que quando eu carrego o conteúdo através da requisição .load, a barra de rolagem não percorre até o final da div.
Quando eu faço o mesmo teste com .append, eu obtenho êxito e barra de rolagem desce até o fim sem maiores problemas.
$(function() {
$(".abrir").on('click', function(){//Abrir conversa
$('#conteudo1').addClass('d-none');
$('#conteudo2').removeClass('d-none');
$( "#conteudo2" ).load( "pagina.html" );
//Exemplo de uso com .append (Funciona corretamente)
/*for(var i = 0; i < 1000; i++){
$( "#conteudo2" ).append( "<p>Teste</p>" );
}*/
//scroll to last message
$('#conteudo2').delay(1000).animate ({
scrollTop: $('#conteudo2')[0].scrollHeight
});
});
});
HTML
<div id="container">
<div id="conteudo1">
<div class="abrir">Abrir</div>
</div>
<div id="conteudo2" class="d-none">
<div id="resultado"></div>
</div>
Obs.: No JSFiddle eu disponibilizo o script com os 2 comandos (.append e .load), porém não consegui carregar o conteúdo no comando .load, pois como esse comando carregará uma segunda página, eu não consegui incluir essa página no JSFiddle para testes. Então não irá funcionar no JSFiddle. Porém se vocês tentarem local, vão ver que a barra de rolagem não desce até o final.
Me ajudem a consertar o script com o comando .load e fazer a barra de rolagem descer até o final?! E, se possível, me expliquem por que isso acontece?! Porque funciona com .append e não com .load, se ambos carregam conteudo na div?
Link do JSFiddle: https://jsfiddle.net/Joka89/ge4yburk/7/
Muito obrigada!