Jquery Ajax轮询在每次调用时都会跳到顶部

Question

我正在使用下面的函数来显示当前活动的游戏列表。现在的问题是，如果玩家正在浏览列表，并且执行ajax调用，那么它会跳到div的顶部，我用ajax调用的响应替换它。

如何避免跳到div的顶部？或者应该实现任何其他解决方案来显示最新游戏列表而不跳过ajax调用？

(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);
    }());

单行响应带有一些数据和按钮以加入游戏。

    <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>

多行响应将具有多个<

Answer 1

您可以尝试保存当前滚动位置，然后在插入后返回。

(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);
}());