Trigger scrollToTop() event in side menus

Ionic Framework ionic-v3
1

I have two side menus (left and right) like facebook.
and each menu, i have ion-content.

How do i access the ion-content and trigger scrollTo() or scrollToTop() event?

<ion-menu side="left">
  <ion-content></ion-content>
</ion-menu>
<ion menu side="right">
  <ion-content></ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
2

Well, First Create a side menu:

<ion-menu side="left">
  <ion-content></ion-content>
</ion-menu>
<ion menu side="right">
  <ion-content>
      <div>
          All the contents goes here
     </div>
     <buttton (click)="slideUP()">Move to Top</button>
  </ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

In your .ts file

import {ViewChild} from ‘@angular/core’;
import {Content} from ‘ionic-angular’;

export class SamplePage{
  @ViewChild(Content) content: Content;

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

I had the same feature implemented in one of my app where the side has a long description about a product so can users can jump back to top easily.

3

Well in my case i would need to trigger event from Home Page component (my side menu is on App component). This will be a button to open side menu. However the button itself is not inside ion-content, so can’t use your logic using viewchild.

4

I have use the code from chandroiud but only scrolls up the left menu, the rigth menu is ignored. Is there any way to have a reference to the right content or both contents?

5

did you find the workaround??
I’m trying to get the full width side-menu.

6

No, I actually tried doing this but didn’t work…

First you give a name for the element like below

<ion-content #giveContentName>
...
</ion-content>

In your controller, you would need

@ViewChild('giveContentName') content: Content;
...
// and somewhere in your code.. 
this.content.scrollToTop();

it didn’t give any errors, but just didn’t work.

7

actually, i have solved this after i posted.

just simply set the tag with the with of 360px;

width: 360px;

this will give you full with side-menu

8

This worked for me but only when the menu is being shown. In my case I show notification list on the menu, and the content changes on different pages. I would like to scroll to the top when I change the content, when the menu is not being shown. Is there someway to do it? Currently I’m scrolling to the top using the ionOpen event

9

The reason it doesn’t work is because the triggers display: none; and display: block; for it’s visibility. So scrollToTop() doesn’t work for elements with display: none;

Anyway, there’s a solution to force scroll the side menu to top on close.

<ion-menu side="left" id="main-nav" (ionClose)="closingNavCallback()" [content]="content">
  <ion-content #navChild>
  ....
  <ion-content>
</ion-menu>

ion-menu {
	&#main-nav {
		display: block !important;
		visibility: hidden;
	}

	&.show-menu {
		visibility: visible !important;
	}
}

and in your app.component.ts

  closingNavCallback() {
   this.navChild.scrollToTop();
  }

This will scroll top your side menu always when it’s being closed.