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.

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

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);
  }
}</pre>
 

</div>
<h4># Methods available on ion-content</h4>
Following are the methods available to deliberately scrolling the ion-content section to Top, Bottom or any coordinate point.
<div></div>
<div><code><strong>scrollToBottom</strong>: Scroll to the bottom of the component

<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></pre>
 

Add methods in Component called from the template. Here we used <code><strong>@ViewChild</strong> 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);
  }


}
</pre>
 
<h3># How to smoothly Scroll to an Element within the sections of the page?</h3>
As a bonus tip asked by a visitor, how we can implement <code>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.'
      }
    ]</pre>
 

Bind the list in the Home page as shown below. if you notice at each<strong><code> <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);

  }</pre>

Here we are getting the offsetTop of <code><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.







Category: Ionic Framework