ajax - Jquery Ajax Polling 在每次调用时都会跳到顶部

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