Descer barra de rolagem automática em div(janela) de chat!

[elyssonraphael 0]

 

Boa tarde pessoal, não manjo de JS, porém o código está 99% pronto, ajeitei uns bugs, mas não consigo fazer a barra de rolagem da janela do chat descer automaticamente ao inserir uma nova mensagem!

Como proceder?

**chat.php**

<?php

        if(isset($_SESSION['logado']) && $_SESSION['logado'] === TRUE){
            try{

                $prep =  $L->prepare("Select id,nome from usuarios where id != :id ");
                $prep->bindValue(':id',$_SESSION['id']);
                $prep->execute();
                $nr = $prep->rowCount();

                if($nr > 0){
                   while($row = $prep->fetchObject()){
                       echo '<li  class="useritem"><a class="comecar" style="cursor:pointer" id="' . $row->id . '" >' . $row->nome .'</a></li>';
                   }
                }else{
                    echo '<li>Nenhum contato</li>';
                }

            } catch (PDOException $ex) {
                die($ex->getMessage());
            }

        }

            ?>

<div id='janelas'>

**scripts.js**

$(document).ready(function(){
    
    var janelas =  new Array();
    
    function abrir_janelas(x){
        $(".left li.useritem a ").each(function(){
           var link = $(this);
           var id = link.attr('id');
           if(id === x){
               link.click();
  
           }
        });
    }
    
    function verificar_msgs(){
        setInterval(function(){
            
            $.post('mensagens.php',{action:'verificar'},function(data){
               if(data !== ''){
                   for(i in data){
                        abrir_janelas(data[i]);
 
                   }                   
               }else{} 
            },'Json');
            
        },2000);
    }
    verificar_msgs();
    $("#janelas").on('click',function(){
        $.post('mensagens.php',{action:'ler_msg'},function(data){
               if(data !== ''){
                   $(".mensagens ul.lista li").addClass('lida') ;                 
               }else{} 
            },'Json');
    });
    function add_janelas(uid,nome){
        var html_add='<div class="miniwindow" id="jan_' + uid + '"><div class="usernametop" id="' + uid + '"><a href="javascript:void(0);">' + nome + '</a> <a href="javascript:void(0);" class="fechar" title="fechar janela">X</a></div><div class="corpo"><div class="mensagens"><ul class="listar"></ul></div></div><input type="text" class="msgbox" id="' + uid + '"  maxlength="255" /></div></div>';
        $("div.right #janelas").append(html_add);
 
    }
    //var miniwindow = 
    
    $(".useritem").on('click',function(){
        if($(this).children('a').attr('class') === 'comecar'){
            var uid = $(this).children('a').attr('id');
            var nome = $(this).children('a').html();            
            janelas.push(uid);
            for (var i = 0; i < janelas.length; i++) {
                if (janelas[i] === undefined) {         
                  janelas.splice(i, 1);
                  i--;
                }
            }
            $(this).children('a').removeClass('comecar');
            add_janelas(uid,nome);
            return false;
        }
        
    });
    
    $("body").delegate('a.fechar','click',function(){
       
        $(this).parent().parent().hide();
         var id = $(this).parent().attr('id');
          $(".useritem").children('a#'+id).addClass('comecar')
         $(".miniwindow #" + id).hide();
         var n = janelas.length;
         for(i=0;i<n;i++){
             if(janelas[i] !== undefined){
                 if(janelas[i] === id){
                     delete janelas[i];
                 }
             }
         }
          
    });
    
    $("body").delegate('.usernametop','click',function(){
        var pai = $(this).parent();
        var child = pai.children('.corpo');
        var isto = $(this);
        if(child.is(':hidden')){
            isto.removeClass('fixar');
            child.toggle(100);
        }else{
          isto.addClass('fixar');
            child.toggle(100);  
        }
    });
    
     $('body').delegate(".msgbox",'keydown',function(e){
         //alert(e.keyCode);
        var campo = $(this);
        var mensagem  =  campo.val();
        var to = $(this).attr('id');
        if(e.keyCode === 13){
               
            if(mensagem !== ''){
                $.post('mensagens.php',{
                    mensagem: mensagem,
                    id_para: to,
                    action:'insert'
                },function(data){
                  //console.log("--- " + data + " ---");
                    $("#jan_"+to+" .mensagens ul.listar").append(data);
                    campo.val('');
setTimeout(function(){
var textArea = document.getElementById('_');
textArea.scrollTop = textArea.scrollHeight;
}, 10);
                });
            }else{
                alert('Digite uma mensagem');
            }
        }
    });
    
    setInterval(function(){
        $.post('mensagens.php',{
            action:'retrieve',
            array:janelas
        },function(data){
            if(data !== ''){
                for(i in data){
                    $("#jan_"+i+" .mensagens ul.listar").html(data[i]);
                }
            }else{
                console.log(data + "ERRRO");
            }
        },'Json');
    },2000);
    
    
    
});

** Creio que tenha que add alguma ação de scrollTO() na função de inserir msg, mas não tenho certeza, aguardo ajuda ;\\ **

[Helmesvs 10]

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

painel é a div onde tem o scroll

[elyssonraphael 0]

Continua sem funcionar ;s

Não sei se estou colocando no lugar certo!

mas a div em chat.php é:

 

<div id='janelas'>

 

seria aqui em script.js:

$('body').delegate(".msgbox",'keydown',function(e){
         //alert(e.keyCode);
        var campo = $(this);
        var mensagem  =  campo.val();
        var to = $(this).attr('id');
        if(e.keyCode === 13){
            if(mensagem !== ''){
                $.post('mensagens.php',{
                    mensagem: mensagem,
                    id_para: to,
                    action:'insert'
                },function(data){
                  //console.log("--- " + data + " ---");
                    $("#jan_"+to+" .mensagens ul.listar").append(data);
					$("#janelas").animate({scrollTop: $('#janelas').prop("scrollHeight")}, 100);
                    campo.val('');
					
                });
            }else{
                alert('Digite uma mensagem');
            }
        }
    });

[Helmesvs 10]

Faça isso na função que atualiza as msg tbm

[elyssonraphael 0]

Fiz junto, separado, em cada função para testar, e nada da barra de rolagem descer ;\\

 

Segue link dos arquivos para teste do chat, caso seja possível corrigir o erro!

 

https://www.dropbox.com/sh/x7xpc1kftsnc15p/AAD_8-HK3BmZnpWvEZOygNbUa?dl=0