Scroll content to top/bottom using ionic 4 - Solution

Ionic Framework
1

Here is a working sample , tested on mobile devices and browsers for scrolling content top/bottom.

HTML Code -

<ion-header>
  <ion-toolbar>
    <ion-title>
      Scroll Content Example
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-button expand="block" (click)="scrollContent('bottom')">Scroll Bottom</ion-button>

  <ion-card class="welcome-card">
    <ion-img src="/assets/shapes.svg"></ion-img>
    <ion-card-header>
      <ion-card-subtitle>Get Started</ion-card-subtitle>
      <ion-card-title>Welcome to Ionic</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>Now that your app has been created, you'll want to start building out features and components. Check out some
        of the resources below for next steps.</p>
    </ion-card-content>
  </ion-card>

  <ion-card class="welcome-card">
    <ion-img src="/assets/shapes.svg"></ion-img>
    <ion-card-header>
      <ion-card-subtitle>Get Started</ion-card-subtitle>
      <ion-card-title>Welcome to Ionic</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>Now that your app has been created, you'll want to start building out features and components. Check out some
        of the resources below for next steps.</p>
    </ion-card-content>
  </ion-card>


  <ion-card class="welcome-card">
    <ion-img src="/assets/shapes.svg"></ion-img>
    <ion-card-header>
      <ion-card-subtitle>Get Started</ion-card-subtitle>
      <ion-card-title>Welcome to Ionic</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>Now that your app has been created, you'll want to start building out features and components. Check out some
        of the resources below for next steps.</p>
    </ion-card-content>
  </ion-card>


  <ion-card class="welcome-card">
    <ion-img src="/assets/shapes.svg"></ion-img>
    <ion-card-header>
      <ion-card-subtitle>Get Started</ion-card-subtitle>
      <ion-card-title>Welcome to Ionic</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>Now that your app has been created, you'll want to start building out features and components. Check out some
        of the resources below for next steps.</p>
    </ion-card-content>
  </ion-card>


  <ion-card class="welcome-card">
    <ion-img src="/assets/shapes.svg"></ion-img>
    <ion-card-header>
      <ion-card-subtitle>Get Started</ion-card-subtitle>
      <ion-card-title>Welcome to Ionic</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>Now that your app has been created, you'll want to start building out features and components. Check out some
        of the resources below for next steps.</p>
    </ion-card-content>
  </ion-card>

  <ion-button expand="block" (click)="scrollContent('top')">Scroll Top</ion-button>


</ion-content>

TS Code -

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonContent } from '@ionic/angular';
@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  @ViewChild(IonContent) ionContent: IonContent;
  constructor() { }
  scrollContent(scroll) {
    if (scroll === 'top') {
      this.ionContent.scrollToTop(300); //300 for animate the scroll effect.
    } else {
      this.ionContent.scrollToBottom(300);  //300 for animate the scroll effect.
    }
  }
}
5 Likes
2

Very nicely done. I tried dozens of other that tried to use scrollTo(0,0) and none of them worked with divided screen vertical content. The best they managed was to scroll to the bottom of the side list, never to the top of the content.