How to maintain scroll position within a div after dynamically upgrading with AJAX?

Question

I’m building a mini forum, and in it, users can do posts and answer them.

For the page not to get too long, I put a div with a fixed height and width, and if the text passes that value, it will add a scroll bar,

The problem is:

I use the AJAX to update the answers from time to time, and whenever I upgrade, div, and when update with the ajax, he return the bar in that position.

This is the code of AJAX:

<script type="text/javascript">
$(document).ready(function(){
    comeca();
})
var timerR = false;
var timerI = null;
function para(){
    if(timerR)
        clearTimeout(timerI)
    timerR = false;

}
function comeca(){
    para();
    lista();
}
function lista(){
 $.ajax({
        url:"qrTopico.php",
        type: "GET",
        dataType: 'html',
        data: {topico : "<?php echo $topicoGet; ?>"},
        success: function (textStatus){
              $('#respostas').html(textStatus); //mostrando resultado
        }
    })
    timerI = setTimeout("lista()", 10000);//tempo de espera
    timerR = true;
}
</script>

Answer 1

You must record the contents of window.scrollTop in a variable before opening the edit field and after saving or reloading something with ajax, you can also use via jQuery (since you used the tag jquery)

It would look something like:

function atualizaScroll(lastScrollY)
{
    $('#respostas').scrollTop(lastScrollY);
}

function atualizarDados()
{
    var lastScrollY = $('#respostas').scrollTop();

    $.ajax("pagina.php", {
        ... //Dados da requisição aqui
    }).done(function () {
       //Completa a requisição
    }).fail(function () {
       //mostra erro
    }).complete(function () {
       /*
        * Executa mesmo com erro ou sucesso
        * (restaura posição do scroll)
        *
        * Delay é para evitar algo com o tempo da renderização
        */

       setTimeout(atualizaScroll, 10, lastScrollY);
    });
}

Answer 2

As I cannot comment, I will deduce that you are destroying the elements and populating again according to what you return in your Ajax request, if you are doing so, this behavior of the bar going to the top is to be expected.

I suggest you make an increment of the data being updated on the elements that are already created, so the scroll bar will maintain its current position.