How to slide to the top of the page in ionic 3

Question

I am developing a SIgnup page in ionic 3 and the no of fields are 10. SO I am using a p tag to show validation and when the user hits submit I want to take him all the way up to the start of the page which has my header and all.How can I achieve this?I have tried everything. Below is my code:

<ion-content padding class="label-cl green-bg acct-sct item-row" style="position:fixed">
  <h2 class="center-col">Create An Account</h2>
  <form #f="ngForm" (ngSubmit)="signUp(f)">
    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input type="text" name="name" ngModel required></ion-input>
    </ion-item>
    <p style="color:red;text-align: left" *ngIf="usernameError">Invalid Username</p>
    <ion-item>
      <ion-label floating>Email</ion-label>
      <ion-input type="email" name="email" ngModel required></ion-input>
    </ion-item>
    <p style="color:red;text-align: left" *ngIf="emailError">Invalid E-mail</p>
    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input type="Password" name="password" ngModel required></ion-input>
    </ion-item>
    <p style="color:red;text-align: left" *ngIf="passwordLengthError">Invalid Password</p>
    <ion-item>
      <ion-label floating>Confirm Password</ion-label>
      <ion-input type="Password" name="confirm_password" ngModel required></ion-input>
    </ion-item>
    <div class="button-inline">
      <button ion-button class="yellow-cl" [disabled]="!f.valid">Submit</button>
    </div>
  </form>
</ion-content>

It has more fields but I am showing only these just for the sake of clarity. Thanks in advance.

Answer 1

Add the below code to your .ts file

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class SignUpPage{
  @ViewChild(Content) content: Content;

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

We used Angular's @ViewChild annotation to get a reference to the ionic content component which has the method scrollToTop().

Find more details in the Official docs