コンテンツの更新後にdivの下にスクロールする

Question

チャットに新しいメッセージを追加すると、チャットコンテンツが最新のメッセージを追加してスクロールバーを上に移動して更新します。 私はそれが底に留まるようにしようとしていますが、それだけでそれを理解することはできません。

これは私の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; 
} 

Answer 1

それはjQueryのを使用して簡単です。純粋なJSで

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

それは次のようになります。divの内容がリロードされる方法でそれを入れて

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

。