Ionic 4 | How to Scroll to Top / Bottom using Ion Content Scroll Events

In this post, we will discuss Scroll Events available in Ionic 4 IonContent using which we can scroll Ionic page content to Top, Bottom or to any point providing X Y axis.

Here we will also explore how to use scroll event listeners on ion-content page containers.

To use ion-content scroll event we need to enable scroll events by setting [scrollEvents]=”true”.

Scroll events available for ion-content:

ionScrollStart: Emitted when the scroll has started.
ionScrollEnd: Emitted when the scroll has ended.
ionScroll: Emitted while scrolling. This event is disabled by default. Look at the property: scrollEvents

Methods available on IonContent are:

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

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

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

Leave a Reply

3 Comment threads
1 Thread replies
Most reacted comment
Hottest comment thread
4 Comment authors
Amit SharmaJovanyMezurashashank trivediNazeh Recent comment authors
newest oldest most voted
Notify of

Hi Nice one. But how can target a SPECIFIC element on the page and scroll to dynamically ???

shashank trivedi
shashank trivedi

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


me too thanks for comment dude . cheers !

Amit Sharma
Amit Sharma

How to use scrollToBottom() with ionic for react