ion content scroll to top code example

Example 1: ion-content --offset-bottom

ion-content {
    --offset-top: 0 !important;
}

Example 2: ionic move view to top of page when selected

<ion-tabs>
  <ion-tab [root]="tab1Root" (click)="myMethod()"></ion-tab>
  <ion-tab [root]="tab2Root" (click)="myMethod2()"></ion-tab>
  <ion-tab [root]="tab3Root" (click)="myMethod3()"></ion-tab>
</ion-tabs>

myMethod()
{
 this.content.scrollToTop();

}

Example 3: ionic move view to top of page when selected

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-tab2',
  templateUrl: './tab2.page.html',
  styleUrls: ['./tab2.page.scss'],
})
export class Tab2Page implements OnInit {

  @ViewChild(IonContent) private content: IonContent;

  constructor() { }

  ngOnInit() {
  }

  ionViewWillEnter() {
    this.content.scrollToTop();
  }

}

Tags:

Css Example