每次刷新时滚动到 div 的底部答案

【问题标题】：Scrolling to bottom of div at every refresh每次刷新时滚动到 div 的底部
【发布时间】：2011-12-12 09:51:59
【问题描述】：

目前，我有一个每 8 秒刷新一次的 div。这个 div 基本上加载了一个 php 页面。但是，我面临滚动到此页面底部的问题。这是刷新和滚动到 div 底部的代码：

 <script>
    var refreshId = setInterval(function()
    {            
         $('#responsecontainer').fadeOut("slow").load('forum.php').fadeIn("slow");

         $('#chat').attr({ scrollTop: $('#chat').attr("scrollHeight") });
    }, 8000);

    </script>

div容器代码如下：

<div style="width: 100%; height: 300px; overflow: scroll; border: 5px ; background-color:#ccc ;" id="responsecontainer" name="chat">

            Loading..

 </div>

请建议我如何在 div 刷新时转到底部。谢谢

【问题讨论】：

标签： html scroll refresh

【解决方案1】：

应该在加载文档时调用脚本。然后使用 fadeOut 和 fadeIn 动画将在加载后发生，因此它会重置滚动位置。下面的脚本可以工作，但最终没有这些动画。

load 方法是一个 XHR 调用，它返回响应状态，我们可以使用它来控制显示的数据。

$(document).ready(function() {
var refreshId = setInterval(function() {            
    $('#responsecontainer').load('forum.php', function(response, status, xhr) {
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
            $("#error").html(msg + xhr.status + " " + xhr.statusText);
        }
        else{
            $('#responsecontainer').scrollTop($('#responsecontainer').height());        
        }
    });
}, 8000);
});

【讨论】：