无法修复聊天框（div）底部的滚动条

Question

I'm working on chat application. On loading my PHP file I want to fix the scroll bar at the bottom of div. I have written the script to do this. I'm accessing it using CSS Id but I'm unable to make it work.

Code

//Css part
<style>
.msg-wgt-body {
 height: 300px;
 overflow-y: scroll;}
</style>

<script>
$(".1").scrollTop($('.1').height())
</script>

<div class="container" style="border: 1px solid lightgray;">
<div class="msg-wgt-header">
<a href="#">Kaps</a>
</div>
<div class="msg-wgt-body" id="1">
<table>
<?php
if (!empty($messages)) {
foreach ($messages as $message) {
$msg = htmlentities($message['message'], ENT_NOQUOTES);
$user_name = ucfirst($message['username']);   
$sent =  date("F j, Y, g:i a", strtotime($message['sent_on']));

echo <<<MSG
          <tr class="msg-row-container">
            <td>
              <div class="msg-row">
                <div class="avatar"></div>
                <div class="message">
       <span class="user-label"><a href="#" style="color: #6D84B4;">
    {$user_name}</a> <span class="msg-time">{$sent}</span></span><br/>{$msg}
          </div>
              </div>
            </td>
          </tr>
 MSG;

        }
      }

      else {
        echo '<span style="margin-left: 25px;">No chat messages available!
</span>';
      }


      ?>

    </table>
  </div>

Answer 1

You can do this using your CSS -Class as well.

<script>
$(document).ready(function(){
        $(".msg-wgt-body").scrollTop($('.msg-wgt-body')[0].scrollHeight);

   return false;
});
</script>

Use this above code and add this at the bottom of your PHP file(You can add this in your JS file as well). Try this it should work.

Answer 2

I guest you want scroll down to the bottom when the chats loaded, right!

Just replace this

</style>
      <script> $(".1").scrollTop($('.1').height()) 
</script>

with

<script>
   $("#1").scrollTop($('#1')[0].scrollHeight);
</script>