Scroll content to top/bottom using ionic 4 - Solution

@champion007 wrote:

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.
    }
  }
}

Posts: 1

Participants: 1

Read full topic