将div自动滚动至底部
问题描述:
我有一个用于我的网站的聊天模块。我有一个div用于显示我的消息,当我打开聊天页面时,我想让它滚动到div的底部。最近的消息出现在底部。将div自动滚动至底部
下面是HTML和CSS代码正在使用 /CSS/
#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>
答
你可以,使用jQuery,计算div的底部,然后滚动到它:
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的底部与屏幕底部相匹配。
你能给我们提供更多的细节吗?你的代码到目前为止看起来如何? – Apolymoxic
欢迎来到Stack Overflow!预计你至少试图为自己编码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**](http://meta.*.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) ,无论是通过谷歌或通过搜索,做出尝试和。如果您仍然遇到麻烦,请返回**您的代码**并解释您尝试过的以及为什么它不起作用。 –
我已经上传了代码...让我知道你在想什么 –