Auto Scroll to Bottom DIV

问题:

I have made chat system, but I had a problem with scrolling div for the messages that the scroll bar must be at the bottom as default.

DIV

<div class="chat-body chat-scroll" id="chat-scroll"></div> 

STYLE

.chat-scroll{position: absolute; top:0px; bottom: 0px; overflow-y: auto;} 

I use JQuery for submit message from the input form to reload the content of the #chat-scroll and the auto scrolling is okay for submit, but when at first load of the page, the scroll only stays at the middle of the div #chat-scroll. Unlike if I submit a message it will go to the bottom when I send message.

JQuery For Scrolling

$('#chat-scroll').animate({ scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000);                    

回答1:

When window load scroll your chat div at bottom using document.ready

DEMO

$(document).ready(function(){   $('#chat-scroll').animate({   scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000); }); 

回答2:

var objDiv = document.getElementById("your_div"); objDiv.scrollTop = objDiv.scrollHeight; 

文章来源: Auto Scroll to Bottom DIV