Jquery Ajax Polling jumps to top on every call

Question

I am using below function to display currently active gameList. Now the problem is that if a player is going through the list and if there executes the ajax call then it jumps to the top of div which I replace with the response from the ajax call.

How can I avoid jumping of to the top of div? or any other solution that should be implemented to display a list of latest games without jumping of on ajax call?

(function pollServerForGameList() { 
        $.ajax({
            url:"<?php echo Yii::app()->createUrl('game/getGameList') ?>",
            data:{'id':<?php echo Yii::app()->request->getParam('id')?>},
            type:"POST",
            dataType:"html",
            success:function(response){
                $('.multiplayer').html(response);
            },
        });
        setTimeout(pollServerForGameList, 2000);
    }());

Single row response with some data and button to join the game.

    <ul>
    <li class="first">Math</li>    
    <li>Rookie</li>
    <li>Guest11</li><li>1</li>
    <li class="last"><b><a id="Join" class="greenBtn" href="/game/multiple?id=4&amp;gameid=20&amp;diff=2&amp;cat=4">Join the Game</a></b>
    </li>
    </ul>

Multiple row response will have multiple <

Answer 1

You could try saving the current scroll position and then returning to it after the insert.

(function pollServerForGameList() { 
    //Save current scroll position
    var currPosition = $(window).scrollTop();
    $.ajax({
        url:"<?php echo Yii::app()->createUrl('game/getGameList') ?>",
        data:{'id':<?php echo Yii::app()->request->getParam('id')?>},
        type:"POST",
        dataType:"html",
        success:function(response){
            $('.multiplayer').html(response);
            //Return to the scroll position
            $(window).scrollTop(currPosition);
        },
    });
    setTimeout(pollServerForGameList, 2000);
}());