Ionic 5|4 How to Scroll to Top ,Bottom, to Element with Ion Content Scroll Events

In this Ionic tutorial, we’ll discuss Scroll events and methods available on the ion-content component in the Ionic Framework. These events can be used to Scroll the page to Bottom, Top or to some other coordinate on the screen using the X or Y points.

Here we will also explore how to enable Scroll events then use Scroll event callbacks and methods to scroll on the screen in the application page.

We’ll also discuss How to smoothly scroll to a specific element within the page using offsetTop property of the element.

# How to enable Scroll Events on the ion-content component?

The ion-content component is the main wrapper of the Ionic page which is used to place content we see on a page other then Header and Footer.

To enable the Scroll events, we set the [scrollEvents] property to true which is set to false by default.

<ion-content [scrollEvents]="true">
...
...
</ion-content>

 

# Scroll events available on ion-content

The ion-content component emits following events which can be used by developers to handles certain situation like checking when the user reached bottom or top.

ionScrollStart: Emitted before the scroll is started.
ionScrollEnd: Emitted when the scroll has ended.
ionScroll: Emitted while scrolling.
Using ion-content scroll events
We can add these event triggers on the ion-content element as shown below and define the methods in the component class as shown below:
<ion-content [scrollEvents]="true" 
       (ionScrollStart)="logScrollStart($event)"
       (ionScroll)="logScrolling($event)" 
       (ionScrollEnd)="logScrollEnd($event)"
>
...
...
</ion-content>

Define callback methods for these events in the component class

export class HomePage {

  logScrollStart(event) {
    console.log("logScrollStart : When Scroll Starts", event);
  }

  logScrolling(event) {
    console.log("logScrolling : When Scrolling", event);
  }

  logScrollEnd(event) {
    console.log("logScrollEnd : When Scroll Ends", event);
  }
}

 

# Methods available on ion-content

Following are the methods available to deliberately scrolling the ion-content section to Top, Bottom or any coordinate point.

scrollToBottom: Scroll to the bottom of the component
scrollToTop: Scroll to the top of the component
scrollToPoint: Scroll to a specified X/Y location in the component
scrollByPoint: Scroll by a specified X/Y distance in the component
Add some buttons to call methods from the component for Scroll to Top, Scroll to Bottom & Scroll To Point
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Scroll Events
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content 
     [scrollEvents]="true" 
     (ionScrollStart)="logScrollStart($event)" 
     (ionScroll)="logScrolling($event)"
     (ionScrollEnd)="logScrollEnd($event)"
>

  <ion-button (click)="ScrollToBottom()"> Scroll To Bottom </ion-button>
  <ion-button (click)="ScrollToPoint(300, 120)"> Scroll To Point Left </ion-button>
  
  <ion-list>
    <ion-item *ngFor="let item of dummyList">
      <ion-label>{{ item.value }}</ion-label>
    </ion-item>
  </ion-list>
  

  <ion-button (click)="ScrollToPoint(-300, -120)"> Scroll To Point Right </ion-button>
  <ion-button (click)="ScrollToTop()"> Scroll To Top </ion-button>


</ion-content>

 

Add methods in Component called from the template. Here we used @ViewChild element variable to bind scroll methods to ion-content element.

// home.page.ts
import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild(IonContent, { static: false }) content: IonContent;
  dummyList: any;


  constructor(
  ) {
    this.dummyList = [
      {
        value: "Esteban Gutmann IV",
      }, {
        value: "Bernardo Prosacco Jr.",
      }, {
        value: "Nicholaus Kulas PhD",
      }, {
        value: "Jennie Feeney",
      }, {
        value: "Shanon Heaney",
      }, {
        value: "Bernardo Prosacco Jr.",
      }, {
        value: "Nicholaus Kulas PhD",
      }, {
        value: "Jennie Feeney",
      }, {
        value: "Shanon Heaney",
      }, {
        value: "Bernardo Prosacco Jr.",
      }, {
        value: "Nicholaus Kulas PhD",
      }, {
        value: "Jennie Feeney",
      }, {
        value: "Shanon Heaney",
      }, {
        value: "Bernardo Prosacco Jr.",
      }, {
        value: "Nicholaus Kulas PhD",
      }, {
        value: "Jennie Feeney",
      }, {
        value: "Shanon Heaney",
      }, {
        value: "Bernardo Prosacco Jr.",
      }, {
        value: "Nicholaus Kulas PhD",
      }, {
        value: "Jennie Feeney",
      }, {
        value: "Shanon Heaney",
      }, {
        value: "Bernardo Prosacco Jr.",
      }, {
        value: "Nicholaus Kulas PhD",
      }, {
        value: "Jennie Feeney",
      }, {
        value: "Shanon Heaney",
      }
    ];
  }

  logScrollStart(event) {
    console.log("logScrollStart : When Scroll Starts", event);
  }

  logScrolling(event) {
    console.log("logScrolling : When Scrolling", event);
  }

  logScrollEnd(event) {
    console.log("logScrollEnd : When Scroll Ends", event);
  }

  ScrollToBottom() {
    this.content.scrollToBottom(1500);
  }

  ScrollToTop() {
    this.content.scrollToTop(1500);
  }

  ScrollToPoint(X, Y) {
    this.content.scrollToPoint(X, Y, 1500);
  }


}

 

# How to smoothly Scroll to an Element within the sections of the page?

As a bonus tip asked by a visitor, how we can implement scrollToLabel method so that we can easily scroll to a section on the page with a smooth animation.

For this, we will use the ScrollToPoint() method to scroll the page in Y-axis.

Now we have a dummyList object with thee properties id,title and text.

    this.dummyList = [
      {
        id: 'ref',
        title: 'Refined pixel holistic',
        text: 'Inventore quae numquam id rerum. Tempora quaerat et veniam. Similique quia amet. Delectus doloremque delectus et doloribus saepe est magnam voluptatem. Consequatur sed ea excepturi eveniet corrupti laboriosam. Laudantium mollitia placeat nemo quod tenetur qui natus. Facilis sit blanditiis harum explicabo eos at ea expedita. Dolor eius animi quod sint et qui non et rem. Consequatur dolor consequatur quos corrupti dolores quis illo molestiae libero. Nihil aut hic nemo dignissimos. Asperiores quo beatae error ut qui nihil. Voluptatibus perspiciatis fuga voluptas distinctio harum et et dolores. Fugiat dolor molestiae necessitatibus dolorum.'
      }, {
        id: 'sma',
        title: 'Small Plastic Mouse SAS Frozen',
        text: 'Inventore quae numquam id rerum. Tempora quaerat et veniam. Similique quia amet. Delectus doloremque delectus et doloribus saepe est magnam voluptatem. Consequatur sed ea excepturi eveniet corrupti laboriosam. Laudantium mollitia placeat nemo quod tenetur qui natus. Facilis sit blanditiis harum explicabo eos at ea expedita. Dolor eius animi quod sint et qui non et rem. Consequatur dolor consequatur quos corrupti dolores quis illo molestiae libero. Nihil aut hic nemo dignissimos. Asperiores quo beatae error ut qui nihil. Voluptatibus perspiciatis fuga voluptas distinctio harum et et dolores. Fugiat dolor molestiae necessitatibus dolorum.'
      }, {
        id: 'ibh',
        title: 'IB Hryvnia Beauty',
        text: 'Inventore quae numquam id rerum. Tempora quaerat et veniam. Similique quia amet. Delectus doloremque delectus et doloribus saepe est magnam voluptatem. Consequatur sed ea excepturi eveniet corrupti laboriosam. Laudantium mollitia placeat nemo quod tenetur qui natus. Facilis sit blanditiis harum explicabo eos at ea expedita. Dolor eius animi quod sint et qui non et rem. Consequatur dolor consequatur quos corrupti dolores quis illo molestiae libero. Nihil aut hic nemo dignissimos. Asperiores quo beatae error ut qui nihil. Voluptatibus perspiciatis fuga voluptas distinctio harum et et dolores. Fugiat dolor molestiae necessitatibus dolorum.'
      }, {
        id: 'tab',
        title: 'Table maroon',
        text: 'Inventore quae numquam id rerum. Tempora quaerat et veniam. Similique quia amet. Delectus doloremque delectus et doloribus saepe est magnam voluptatem. Consequatur sed ea excepturi eveniet corrupti laboriosam. Laudantium mollitia placeat nemo quod tenetur qui natus. Facilis sit blanditiis harum explicabo eos at ea expedita. Dolor eius animi quod sint et qui non et rem. Consequatur dolor consequatur quos corrupti dolores quis illo molestiae libero. Nihil aut hic nemo dignissimos. Asperiores quo beatae error ut qui nihil. Voluptatibus perspiciatis fuga voluptas distinctio harum et et dolores. Fugiat dolor molestiae necessitatibus dolorum.'
      }
    ]

 

Bind the list in the Home page as shown below. if you notice at each <h4> element we have provided the id attribute which will help to scroll to that section

<ion-content [scrollEvents]="true" (ionScrollStart)="logScrollStart($event)" (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd($event)" class="ion-padding">

  <ion-button (click)="scrollToLabel(item.id)" *ngFor="let item of dummyList">
    {{item.title}}
  </ion-button>

  <div *ngFor="let item of dummyList">
    <h4 id='{{item.id}}'>{{item.title}}</h4>
    <p>{{item.text}}</p>
  </div>


  <ion-button (click)="ScrollToPoint(-300, -120)"> Scroll To Point Right </ion-button>
  <ion-button (click)="ScrollToTop()"> Scroll To Top </ion-button>


</ion-content>

Also, we added buttons to scroll to a specific title on click event calling the scrollToLabel() we passed the id.

Next, we will update the home.page.ts file with the following method

  scrollToLabel(label) {
    var titleELe = document.getElementById(label);
    this.content.scrollToPoint(0, titleELe.offsetTop, 1000);
  }

Here we are getting the offsetTop of <h4> element with matching id.The offsetTop is Javascript method which returns the current position of the element from the top of the document. The scrollToPoint method takes three attributes X-axis, Y-axis and duration in ms.

Now can easily navigate to the title by tapping the title button

 

That's so by following above steps you can add scroll methods and events in Ionis application pages for implementing scroll functionalities.

6 thoughts on “Ionic 5|4 How to Scroll to Top ,Bottom, to Element with Ion Content Scroll Events

  • Hello, thank you very much for great tutorial. I am using the ‘scrollToPoint’ method as explained here. However, the offsetTop property returns 2 different values. When I come to the page I have used offsetTop from homepage, it returns 976. But if I just refresh the page (in browser) it returns 932.The difference here is 44 and it is the height of the header. I have my header placed outside the ion-content.

    Why is this? How to solve that behaviour?

  • facing error saying “this.content.scrollToBottom is not a function” , the same error is coming for other functions too. Two changes i have to make to compile this code that is.
    1)import { Component,ViewChildren } from ‘@angular/core’;
    2) @ViewChildren(IonContent) content: IonContent;

    instead of using ViewChild i have to use ViewChildren . Your Help is deeply appreciated. Thanks Alot

Leave a Reply

Your email address will not be published. Required fields are marked *