Scroll to top in ionic

Ionic Framework ionic-v3
1

How do we trigger to scroll to top in ionic 2? ionic 1 had some delegates to do this, but not sure how i can do this in ionic 2. Some use case might be

  • If sidemenu has a long list of menus, and if one touches the menu than scroll to the top of the list in sidemenu.

Also would love to know how to scroll to specific element in ionic 2 as well.

1 Like
2

In this case, you can use the .scrollToTop() method on the content class.

5 Likes
3

awesome. thanks. was the element I should look for :slight_smile: nice.

1 Like
4

hi @mhartington, the scrollToTop in the attached code, is not working for me. please advise.

in html file:

<ion-content id="listScroll">
 <ion-list [style.direction]="direction" >   
     <ion-item  *ngFor="let item of selectedEntItems | objToIterable;let ind=index" >
         <!--List item header-->
         <!--List item content-->
    </ion-item>    
 </ion-list>
 <ion-infinite-scroll *ngIf="loadMoreData()==true" (ionInfinite)="doInfinite($event)"> 
 </ion-infinite-scroll>
</ion-content>

in ts file:

let scrollContent: Content = document.getElementById(“listScroll”);
scrollContent.scrollToTop;

1 Like
5

is it possible to only scrollToTop when a tab is changed, i tried doing it in the components viewDidload but that occurs everytime a page is in view coming back to the page from a sub-page, for example users list, item clicked, go back to users list and the scrollToTop will occur.

1 Like
6

Did you try putting parentheses after scrollToTop?

  scrollContent.scrollToTop();

Otherwise Javascript may simply do nothing at that line, and not give you an error.

1 Like
7

In your .html file

<ion-content #pageTop>
  <!-- Other content here -->
</ion-content>

In your .ts file

import { Content } from 'ionic-angular';

//
//...
//

export class ScrollPage{
  @ViewChild('pageTop') pageTop: Content;

  /**
   * Method to scroll to top
   */
  public pageScroller(){
    //scroll to page top
    this.pageTop.scrollToTop();
  }
}
11 Likes
8

for ionic 4 you can use this code

import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({...})
export class MyPage{
  @ViewChild(IonContent) content: IonContent;

  scrollToTop() {
    this.content.scrollToTop(400);
  }
  ionViewDidEnter(){
    this.scrollToTop();
  }
}
4 Likes
9

For Ionic’s 4.x we can implement ScrollToTop as explained here

Ionic%204-%20scroll%20to%20top%20bottom
Ionic 4- scroll to top bottom.gif295Ă—533 709 KB

2 Likes
10

I suggest, just replace one line, if there is some error in
@ViewChild(IonContent) content: IonContent;
to
@ViewChild(IonContent, {static: true}) content: IonContent;

2 Likes
11

I tried using this method. But I want my page to scroll up when the slide changes not with a button click.

I tried implementing the method in a slidedidchange method and calling it in the (ionSlidesDidChange) parameter, but nothing happens everytime i change the slide. And i also have other code in the slide did change method which is working find so the method is being activate it as it suppose to. the scrolltoTop implementation is not working for me … Example below:

scrollToTop() {
    this.content.scrollToTop(400);
  }

slideDidChange() {
    this.favHasChanged = 'no';
    this.scrollToTop();
    this.slides.getActiveIndex().then(currentSlideSectorID => {
      this.slideChanged.emit(currentSlideSectorID);
      console.log('slideDidChange() activeIndex: ' + currentSlideSectorID);
    });
  }

<ion-slides [options]="slideOpts2" style="min-height: 100%" class="sectorSlides" #slides (ionSlideWillChange)="this.slideTap()" (ionSlideDidChange)="this.slideDidChange()">
1 Like
12

Still not working for me … when changing slides

1 Like
13

This work fine for me, thank, this is my code

import { IonSlides, IonSelect, AlertController, IonContent } from '@ionic/angular';

...

  @ViewChild(IonContent, {static: true}) content: IonContent;

..


 slide(slideId) {
    this.slides.lockSwipes( false );
    this.slides.slideTo(slideId);
    this.content.scrollToTop(400);
    this.slides.lockSwipes( true );
  }

Thnaks

1 Like
14

Still not working for me :confused:

2 Likes