title: How to scroll to the bottom of the chat page in ionic 5
body: <p>i am building a chatting mobile app with ionic 5, i want to be able to scroll to the bottom of the chat but its not working, i searched online but the solution i saw wasn't working, it just scrolled a little bit, but not to the end of the chat</p>
  <p>Here is my code for the chat.page.html</p>
  <pre class="lang-js prettyprint-override"><code>&lt;ion-header&gt;
  ....
  &lt;/ion-header&gt;
  
  &lt;ion-content class=&quot;bg&quot;&gt;
      &lt;ion-button expand=&quot;block&quot; (click)=&quot;scrollContent()&quot;&gt;Scroll 1&lt;/ion-button&gt;
      &lt;div class=&quot;chat-container&quot;&gt;
          &lt;div *ngFor=&quot;let message of messages; let i=index;&quot; class=&quot;chat-bubble&quot; [(ngClass)]=&quot;message.type&quot;&gt;
              &lt;h6&gt;{{ message.text }}&lt;/h6&gt;
              &lt;p&gt;{{ message.created }}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/ion-content&gt;
  &lt;ion-footer&gt;
  .......
  &lt;/ion-footer&gt;
  </code></pre>
  <p>Here's the code for the chat.page.ts</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { IonContent } from '@ionic/angular';
  
  @Component({
    selector: 'app-chats',
    templateUrl: './chats.page.html',
    styleUrls: ['./chats.page.scss'],
  })
  export class ChatsPage implements OnInit {
  
      messages=new Array() 
      @ViewChild(IonContent, { static: false }) content: IonContent;
      constructor(
      ) { }
      
      ngOnInit()  {
          this.messages=[
              { text: &quot;Hey what's up?&quot;, type: 'received', created: '14:02' },
              { text: &quot;Nothing&quot;, type: 'send', created: '14:05' },
              { text: &quot;Want to go to the movies?&quot;, type: 'send', created: '14:05' },
              { text: &quot;I'm sorry, I can't&quot;, type: 'received', created: '14:15' },
              { text: &quot;but can we go tomorrow?&quot;, type: 'received', created: '14:16' },
              { text: &quot;Nothing&quot;, type: 'send', created: '14:05' },
              { text: &quot;Nothing&quot;, type: 'send', created: '14:05' },
              { text: &quot;Nothing&quot;, type: 'send', created: '14:05' },
              { text: &quot;Nothing&quot;, type: 'send', created: '14:05' },
              { text: &quot;I'm sorry, I can't&quot;, type: 'received', created: '14:15' },
              { text: &quot;but can we go tomorrow?&quot;, type: 'received', created: '14:16' },
          ]
      }
      scrollContent() {
          this.content.scrollToBottom(300)    
      }
  }
  </code></pre>
  <p>I want it to scroll to the bottom of the div with <code>class=&quot;chat-container&quot;</code> when i click the button.
  Please what am i doing thats not right</p>