0

Opa, tenho uma aplicação web de chat, ele faz verificações a cada x segundos de novas mensagens, preciso que ao fim dessas verificações, que é via ajax, o scrool da Div #result desça automaticamente, tentei assim:

$('html, body').animate({scrollTop:$('#result').offset().top}, 'slow');

O que está movimentando é a página completa e para cima, o que há de errado?

1 Resposta 1

5

Descer seria rolar até o final? Se sim creio que você tenha feito errado, o $('#result').offset().top pega a posição do "topo", creio que para o teu caso você teria que usar o height, fora que da maneira que você fez esta afetando o scroll da página e não da div, faça assim:

var container = $("#container");
var inner = $("#inner");

//Simula a entrega de mensagens
var me = true,
    msgs = [
    'Oi?',
    'Quer tc?',
    'você é de onde?',
    'Poderia me ajudar com uma duvida de JS?',
    'já usou o stack overflow?',
    'Vamos jogar um fut?'
];

setInterval(function () {
    var randomMsg = msgs[Math.floor(Math.random() * msgs.length)];
    me = me ? false : true;

    $('<p class="' + (me ? 'me' : '') + '">' + randomMsg + '</p>').appendTo(inner);
    scrollChat();
}, 1000);

function scrollChat() {
    container.stop().animate({
        "scrollTop": inner.height()
    }, 'slow');
}
#container {
    width: 240px;
    height: 280px;
    background-color: #fcfcfc;
    border: 1px #ccc solid;
    overflow: auto;
    padding: 5px;
}

#inner p {
   background-color: #4d7cfb;
   border-radius: 3px;
   color: #fff;
   margin: 5px 15px 5px 5px;
   padding: 5px;
}

#inner p.me {
   margin: 5px 5px 5px 15px;
   background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
    <div id="inner"></div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .