将 div 自动滚动到底部答案

【问题标题】：Scroll a div to bottom automatically将 div 自动滚动到底部
【发布时间】：2016-12-27 03:18:48
【问题描述】：

我的网站有一个聊天模块。我有一个 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>

【问题讨论】：

你能告诉我们更多细节吗？到目前为止，您的代码是什么样的？
欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
我已经上传了代码...让我知道你们的想法

标签： javascript html css

【解决方案1】：

您可以使用 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 的底部与屏幕的底部相匹配。

【讨论】：