内容刷新后滚动到div的底部[重复]答案

【问题标题】：Scroll to bottom of div after content refresh [duplicate]内容刷新后滚动到div的底部[重复]
【发布时间】：2017-01-19 02:17:31
【问题描述】：

在聊天中添加新消息时，聊天内容会刷新添加新消息并将滚动条移动到顶部。我试图让它保持底部，但无法单独解决。

这是在我的 html 页面中：

<script type="text/javascript">
<!--
var iChat_cfg = ["300", "15"];

var iChat_lang = ["Edit messages", "Write a new message", "iChat error", "Write your message.", "Your message text is too long.", "Agree", "Save Settings", "Clear DB", "Check for updates"];

function reFreshiChat()
{
iChatRefresh('site');
return false;
};

setInterval(reFreshiChat , iChat_cfg[1]*1000);
//-->

</script>
<div id="iChat-style">
   <div id="iChat-messages" align="left">
   <div class="chat">Message 1</div>
   <div class="chat">Message 2</div>
   <div class="chat">Message 3</div>
   <div class="chat">Message 4</div>
   <div class="chat">Message 5</div>
</div>
</div>

这是在我的 js 文件中：

    function iChatRefresh(place)
{

    $.post(dle_root + "engine/modules/iChat/ajax/refresh.php", { action: "refresh", place: place }, function(data){

if(data != 'no need refresh'){

        $("#iChat-messages").html(data);

};


    });

    return false;
};

和css：

#iChat-style {
    width:100%;
    height:300px;
    overflow:auto;
}

【问题讨论】：

标签： javascript jquery html css chat

【解决方案1】：

使用 jQuery 很简单。

$("#iChat-messages").scrollTop($("#iChat-messages")[0].scrollHeight);

使用纯js看起来像：

var objDiv = document.getElementById("#iChat-messages");
objDiv.scrollTop = objDiv.scrollHeight;

放在重新加载div内容的方法中。

【讨论】：

我需要在哪里准确地添加这个？当我将它添加到我的 .js 文件时，它只会在页面刷新时进入底部，而不是 div 内容刷新。
$("#iChat-messages").html(data);在 if 语句中。
在我开始提问之前就这样做了。对于已登录的用户，它将滚动保持在原处。根本不会上升，但也不会下降。对于来宾用户，聊天失败，因为当我添加这个 jQuery 或 Javascript 时，它不会读取名称字段。
只要在任何重新加载内容的地方添加它。