title: Auto scroll to bottom of the page using overflow auto
body: <p>i have created a chat application using vue js. i use overflow: auto for my div. What i want is to automatically scroll on the bottom of the div so that users will no longer click the scroll to view the latest message. My code does not work and it shows no error in the console. Any help would be appreciated. Thanks.</p>
  
  <p>here is the code</p>
  
  <pre><code>    &lt;template&gt;
   &lt;div class="panel-block"&gt;
          &lt;div class="chat" v-if="chats.length != 0" id="myDiv"&gt;
           &lt;div v-for="chat in chats" style="overflow: auto;"&gt;
               &lt;div class="chat-right" v-if="chat.user_id == userid"&gt;
                   {{ chat.chat }}
               &lt;/div&gt;
               &lt;div class="chat-left" v-else&gt;
  
                   {{ chat.chat}}
               &lt;/div&gt;
           &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div v-else class="no-message"&gt;
              &lt;br&gt;
              There are no messages
          &lt;/div&gt;
          &lt;chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid"&gt;&lt;/chat-composer&gt;
   &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
      props: ['chats','userid','adminid', 'onlineuserss'],
  }
  
  $(document).ready(function(){
  var myDiv = $("#myDiv");
  myDiv.animate({ scrollTop: myDiv.prop("scrollHeight") - myDiv.height() }, 3000);
  });
  
  &lt;/script&gt;
  </code></pre>