title: Auto-hide Floating Action Button in Ionic 4
body: <p>I want to show scrollToTop button when user scrollToBottom and when user at top then only show scrollToBottom. How to manage the button please help me...this is my screenshot please help me how to manage these button.</p>
  
  <p><a href="https://i.stack.imgur.com/VLUOA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VLUOA.jpg" alt="enter image description here"></a></p>
  
  <p><strong>tab1.page.ts</strong></p>
  
  <pre><code>    &lt;ion-content cache-view="false" (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)"
    (ionScrollEnd)="logScrollEnd()" [scrollEvents]="true"&gt;
  
    &lt;ion-fab vertical="bottom" horizontal="end" slot="fixed"&gt;
        &lt;ion-fab-button *ngIf="showToolbar" (click)="ScrollToTop($event)"&gt;
          &lt;ion-icon name="arrow-dropup"&gt;&lt;/ion-icon&gt;
        &lt;/ion-fab-button&gt;
      &lt;/ion-fab&gt;
  
      &lt;ion-fab vertical="top" horizontal="end" slot="fixed"&gt;
        &lt;ion-fab-button  (click)="ScrollToBottom($event)"&gt;
          &lt;ion-icon name="arrow-dropdown"&gt;&lt;/ion-icon&gt;
        &lt;/ion-fab-button&gt;
      &lt;/ion-fab&gt;
  
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>tab1.page.ts</p>
  
  <pre><code> ScrollToTop(event){
      this.content.ionScrollEnd.subscribe((data)=&gt;{
        if(this.content){
          //console.log(data);
         this.showToolbar = true;
        }
       });
      this.content.scrollToTop(1500);
  
    }
    ScrollToBottom(){
      this.content.scrollToBottom(1500);
    }
    logScrollStart(){
  
     // console.log("logScrollStart : When Scroll Starts");
    }
  
    logScrolling(){
  
  
    }
  
    logScrollEnd(){
      this.content.ionScrollEnd.subscribe((data)=&gt;{
        if(this.content){
          //console.log(data);
         this.showToolbar = true;
        }
       });
  </code></pre>