Fabbutton
HTML
<div class="fixed">
<ion-fab vertical="bottom" horizontal="end" edge slot="fixed">
<ion-fab-button class="toolbar-color" size="small" (click)="scrollToTop()">
<ion-icon name="arrow-up"></ion-icon>
</ion-fab-button>
</ion-fab>
</div>
CSS
.fixed {
position: fixed;
bottom: 30px;
right: 0;
}
TypeScript
import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';
@Component({
selector: 'app-fabbutton',
templateUrl: './fabbutton.component.html',
styleUrls: ['./fabbutton.component.scss'],
})
export class FabbuttonComponent {
@ViewChild(IonContent, { static: false }) content: IonContent;
scrollToTop() {
this.content.scrollToTop(1500);
}
}