Scroll to top when I click on tab

Ionic Framework ionic-v3
1

Hi,

I’d like to scroll the content of a page when I navigate between tabs but I’ve got some errors with the code below and I don’t understand why :

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

import { Statistics } from '../statistics/statistics';
import { Home } from '../home/home';
import { Food } from '../food/food';
import { Transports } from '../transports/transports';
import { Shopping } from '../shopping/shopping';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  @ViewChild(Content) content: Content;

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

  tab1Root = Statistics;
  tab2Root = Home;
  tab3Root = Food;
  tab4Root = Transports;
  tab5Root = Shopping;

  constructor() {

  }
}

<ion-tabs [color]="'primary'">
  <ion-tab [root]="tab1Root" tabTitle="" tabIcon="leaf"></ion-tab>
  <ion-tab [root]="tab2Root" (ionSelect)="scrollToTop()" tabTitle="" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="" tabIcon="nutrition"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="" tabIcon="map"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="" tabIcon="basket"></ion-tab>
</ion-tabs>

The errors :

Runtime Error
Uncaught (in promise): TypeError: Cannot read property 'scrollToTop' of undefined TypeError: Cannot read property 'scrollToTop' of undefined at TabsPage.scrollToTop
2

Try to use ElementRef

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

(...)

@ViewChild(Content, {read: ElementRef}) content;
3

Thanks but it doesn’t work :

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Content } from 'ionic-angular';

import { Statistics } from '../statistics/statistics';
import { Home } from '../home/home';
import { Food } from '../food/food';
import { Transports } from '../transports/transports';
import { Shopping } from '../shopping/shopping';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  @ViewChild(Content, {read: ElementRef}) content: Content;

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

  tab1Root = Statistics;
  tab2Root = Home;
  tab3Root = Food;
  tab4Root = Transports;
  tab5Root = Shopping;

  constructor() {

  }
}
4

What is the console.log(this.content); and the error now?

5

The same error I think :

Uncaught (in promise): TypeError: Cannot read property 'scrollToTop' of undefined TypeError: Cannot read property 'scrollToTop' of undefined at TabsPage.scrollToTop
6

Obviously you did the #Content on the tag in the .html file…

7

What does that mean ? How to fix this ?

I did that, it removes errors but the scroll function doesn’t work :

<ion-content>
<ion-tabs [color]="'primary'">
  <ion-tab [root]="tab1Root" tabTitle="" tabIcon="leaf"></ion-tab>
  <ion-tab [root]="tab2Root" (ionSelect)="scrollToTop()" tabTitle="" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="" tabIcon="nutrition"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="" tabIcon="map"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="" tabIcon="basket"></ion-tab>
</ion-tabs>
</ion-content>
8

Make a test, change the first line to <ion-content #Content>

9

No, it doesn’t work, thanks for your help.

10

I resolve it with ionSelect() and events.

scrollToTop() {
    console.log('click');
    this.events.publish('scrollToTop', this.name);

  }
11

The error in your original code arises because your page Home is not rendered when @ViewChild tries to refer to its content – nothing to view, so it doesn’t exist.

You have @ViewChild in the wrong place. It should be inside Home, and in whichever other pages you want to scroll to the top. If you want to send a flag from one page to the other to say, “Scroll to top” you can use navParams, which is lighter than Events. But if you know for sure that you want to scroll to the top every time you enter Home, then it’s probably simplest to put the command inside ionViewWillEnter().