[RESOLVIDO] AutoScroll jQuery

Front-end
#1

Saaaalve galerinha!

Bem, estou desenvolvendo um chat com PHP + JS + MySQL…

A parte do chat está okay já :smiley:

Mas o que está pegando agora é a parte do AutoScroll…
Tipo… Quando a pessoa receber uma mensagem, se o scroll já estiver no máximo pra baixo ele exibe a nova mensagem recebida e rola até o final…
Mas se o scroll antes de receber a mensagem não estiver no máximo ele exibir uma div com um link para que seja rolado até o final…
Porém… Assim que abre a página, a idéia é que ele abra as mensagens anteriores e role até o final (inicialmente estava fazendo isso), mas agora não está mais…

Segue o código:

[code]

Esta e a tela de envio... var ultimo_id = 0; 
        function chamarJSON(){
            setTimeout( "chamarJSON();",1000 );
            $.getJSON('Rotinas/Eventos_Cad_Msgs.php?evt=pegar&id_msg='+ultimo_id, function(retorno) {
                var html = $('#chat').html();
                
                var fim = false;
                fim = chat.scrollHeight - $('#chat').height() == chat.scrollTop;
                
                for(var i = 0; i < retorno.length; i++){
                    ultimo_id = retorno[i].id_msg;
                    if(retorno[i].tipo_msg == 1){
                        html += "<b>"+retorno[i].nome_cliente+"</b> diz: "+retorno[i].conteudo_msg+"<br/>";
                    } else {
                        html += "<b>"+retorno[i].nome_atendente+"</b> diz: "+retorno[i].conteudo_msg+"<br/>";
                    }
                }
                
                if(retorno.length > 0){
                    if(fim){
                        Rolar();
                    } else {
                        //$('#div_rolar').fadeIn(500);
                    }
                }
                
                $('#chat').html(html);
            })
        }
        
        function Rolar(){
            $('#chat').animate({scrollTop: chat.scrollHeight + $('#chat').height()}, 500);
            //$('#div_rolar').fadeOut(500);
        }
        
        $(document).ready(function(){
            chamarJSON();
            $('#chat').scroll(function () {
                $('#div_rolar').animate({top : chat.scrollTop}, 0);
            })
            
            Rolar();
        })
    </script>
</head>
<body>
    <div id="chat" style="border: 1px solid; width: 500px; height: 300px; overflow: auto;">
        <div id="div_rolar" style="width: 500px; position: relative; left: 0; top: 0; background-color: aqua;">
            <a href="javascript:Rolar()" style="display: block;"><center>Rolar para a ultima mensagem...</center></a>
        </div>
    </div>
    <input id="msg"/>
    <input type="button" value="Enviar" onclick="EnviarMsg(msg.value)"/>
</body>
[/code]

Obs a parte de envio está show já :wink:

Grato pela atenção!
Qualquer ajuda é bem vinda!

#2

Pronto galera… Num sei se foi um POG… Mas deu certo :smiley:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Esta e a tela de envio...</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="js/js_envio.js"></script>
        <script>
            var ultimo_id = 0;
            
            function chamarJSON(){
                setTimeout( "chamarJSON();",1000 );
                $.getJSON('Rotinas/Eventos_Cad_Msgs.php?evt=pegar&id_msg='+ultimo_id, function(retorno) {
                    var html = $('#chat').html();
                    
                    var fim = false;
                    fim = chat.scrollHeight - $('#chat').height() == chat.scrollTop;
                    
                    for(var i = 0; i < retorno.length; i++){
                        ultimo_id = retorno[i].id_msg;
                        if(retorno[i].tipo_msg == 1){
                            html += "<b>"+retorno[i].nome_cliente+"</b> diz: "+retorno[i].conteudo_msg+"<br/>";
                        } else {
                            html += "<b>"+retorno[i].nome_atendente+"</b> diz: "+retorno[i].conteudo_msg+"<br/>";
                        }
                    }
                    
                    $('#chat').html(html);
                    
                    if(retorno.length > 0){
                        if(fim){
                            Rolar();
                        } else {
                            $('#div_rolar').fadeIn(500);
                        }
                    }
                })
            }
            
            function Rolar(){
                $('#chat').animate({scrollTop: chat.scrollHeight + $('#chat').height()}, 500);
                $('#div_rolar').fadeOut(500);
            }
            
            $(document).ready(function(){
                chamarJSON();
                $('#div_rolar').fadeOut(0);
                $('#chat').scroll(function () {
                    $('#div_rolar').animate({top : chat.scrollTop}, 0);
                })
            })
        </script>
    </head>
    <body>
        <div id="chat" style="border: 1px solid; width: 500px; height: 300px; overflow: auto;">
            <div id="div_rolar" style="width: 100%; position: relative; left: 0; top: 0; background-color: aqua;">
                <a href="javascript:Rolar()" style="display: block;"><center>Rolar para a ultima mensagem...</center></a>
            </div>
        </div>
        <input id="msg"/>
        <input type="button" value="Enviar" onclick="EnviarMsg(msg.value)"/>
    </body>
</html>

Grato pela atenção aee pessoas!

#3