CODEWITHSUNDEEP
ionic-frameworkionic4
Dinesh Vishwakarma
Dinesh Vishwakarma

Reputation: 666

Auto-hide Floating Action Button in Ionic 4

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.

enter image description here

tab1.page.ts

    <ion-content cache-view="false" (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()" [scrollEvents]="true">

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button *ngIf="showToolbar" (click)="ScrollToTop($event)">
        <ion-icon name="arrow-dropup"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <ion-fab vertical="top" horizontal="end" slot="fixed">
      <ion-fab-button  (click)="ScrollToBottom($event)">
        <ion-icon name="arrow-dropdown"></ion-icon>
      </ion-fab-button>
    </ion-fab>

</ion-content>

tab1.page.ts

 ScrollToTop(event){
    this.content.ionScrollEnd.subscribe((data)=>{
      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)=>{
      if(this.content){
        //console.log(data);
       this.showToolbar = true;
      }
     });

Upvotes: 1

Views: 2374

Answers (1)

Ehsan K. harchegani
Ehsan K. harchegani

Reputation: 3128

Maybe this helps

<ion-content cache-view="false" (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)"
      (ionScrollEnd)="logScrollEnd()" [scrollEvents]="true">

  <ion-fab *ngIf="showTop" vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button *ngIf="showToolbar" (click)="ScrollToTop($event)">
      <ion-icon name="arrow-dropup"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <ion-fab  *ngIf="showBottom" vertical="top" horizontal="end" slot="fixed">
    <ion-fab-button  (click)="ScrollToBottom($event)">
      <ion-icon name="arrow-dropdown"></ion-icon>
    </ion-fab-button>
  </ion-fab>

</ion-content>

and

ScrollToTop(event){
  this.content.ionScrollEnd.subscribe((data)=>{
    if(this.content){
      //console.log(data);
      this.showToolbar = true;
    }
  });
  this.content.scrollToTop(1500);
  this.showBottom=true;
  this.showTop=false;
}

ScrollToBottom(){
  this.content.scrollToBottom(1500);
  this.showTop=true;
  this.showBottom=false;
}

Upvotes: 1

Related Questions