div를 자동으로 하단으로 스크롤

Question

내 웹 사이트 용 채팅 모듈이 있습니다. 내 메시지가 나타나는 div가 있는데 채팅 페이지를 열면 div의 맨 아래로 스크롤하고 싶습니다. 최근 메시지가 맨 아래에 나타납니다. 여기

가 사용하고있는 HTML과 CSS 코드입니다 / CSS 당신은, 사업부의 바닥을 계산 한 다음에 스크롤 jQuery를 사용하여 할 수/

#pageMiddle_message{ 
    margin-left:280px; 
    background:#FFF; 
    width: 700px; 
    height: 592px; 
    border-radius: 5px; 
    padding-bottom:0px; 
    position:fixed; 
    border: orange 2px solid; 
} 
#message{ 
    width:auto; 
    height:100px; 
} 
#chat{ 
    background:orange; 
    color: #fff; 
} 
#no_chat{ 
    background:orange; 
    color: #fff; 
    height:42px; 
    line-height:0.11857143em; 
} 
#head_chat{ 
    color:#fff; 
    line-height: 0.82857143em; 
} 
.sub_paneln{ 
    text-transform:capitalize; 
    color: #444; 
    font-weight:500; 
    background-size: 1px 1px; 
    line-height: 0.82857143em; 
    list-style:none; 
} 
.my_message{ 
    float:right; 
    background-color:#DFFFFB; 
    list-style:none; 
    border-radius:8px; 
    border: #39F 1px solid; 
} 
.their_message{ 
    float:left; 
    background-color:#0ADEF5; 
    border-radius:8px; 
    list-style:none; 
    border: #06F 1px solid; 
    position:inherit; 
} 
.line_message{ 
    color: #444; 
    font-weight:500; 
    background-size: 1px 1px; 
    line-height: 0.82857143em; 
    list-style:none; 
} 
.message_list{ 
    background:#fff; 
    padding:2px; 
    height:445px; 
    max-height:600px; 
    overflow-y:auto; 
    position:relative; 
} 
.message_body{ 
    border-radius: 5px; 
    height:auto; 
} 
#text_message{ 
    width:670px; 
    margin-top:2px; 
    margin-left:23px; 
    background-color:#D2D2D2; 
    padding:0px; 
} 

/*HTML*/ 
<div class="message_body">  
<div id="message_list" class="message_list">messagelist</div> 
<div id="message" class="new_message" style="height:auto;"></div> 
<div style="background:#D2D2D2; height:97px; border-radius:4px;"> 
<div id="text_message"> 
<table width="" height=""> 
    <tr> 
    <th width="auto" style="float:left;"> 
    <a href=""><img src="" width="60" height="60" style="border-radius:5px;"/> 
    </a></th><th style="float:left;"><textarea name="sendmessage" style="width:579px; height:55px; border:orange 2px solid; border-radius:3px;" id="sendmessage" placeholder="send message to messager></textarea></th></th></tr></table> 
    <div style="float:right; padding-right:4px; margin-right:15px; margin-top:-3px;"> 
<input name="send" type="submit" value="send message" onClick="javascript:ajax_send();"> 
</div> 
    </div> 
    </div> 
    </div> 

Answer 1

:

var $div = $("message_list"); 
var divpos = $div.offset(); 
var divheight = $div.height(); 
var divbottom = divpos.top + divheight; 
var windowheight = $(window).height(); 
$(window).scrollTop(divbottom - windowheight); 

변수는 div의 하단을 계산하는 데 사용되며 $(window).scrollTop()은 전달 된 위치로 스크롤합니다. divbottom - windowheight은 div의 하단이 화면 하단과 일치하도록 페이지를 스크롤합니다.