Ionic侧边栏关闭重开需回顶部，调用scrollToTop方法无效

嘿，我刚碰到过类似的问题！你调用scrollToTop没效果，大概率是时机不对——ionClose事件触发的时候，侧边栏已经开始隐藏了，这时候DOM元素可能已经不可见，滚动操作自然不会生效。给你几个可行的解决方案：

方案1：切换到ionWillClose事件（最简单） #

把菜单的关闭事件从ionClose改成ionWillClose，这个事件是在关闭动作开始前触发的，此时侧边栏还完全可见，DOM元素也处于可用状态：

修改app.component.html #

<ion-menu type="overlay" side="right" [swipeEnabled]="false" [content]="content" (ionWillClose)="sideMenuScrollTop()" >
  <sidemenu [nav]="nav"></sidemenu>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>

你的sideMenuScrollTop方法不用改，但要确保SideMenuComponent里的content确实拿到了ion-content的实例——检查下sidemenu.component.html里有没有这样的结构：

<ion-content #content>
  <!-- 你的侧边栏滚动内容（比如列表、链接等） -->
</ion-content>

如果这里没加<ion-content>，@ViewChild(Content)肯定拿不到对象，scrollToTop自然没反应哦。

方案2：在侧边栏组件内自行监听（更解耦） #

不想让父组件管这个逻辑？可以在SideMenuComponent里直接监听菜单的关闭事件，这样组件自己就能处理滚动：

修改sidemenu.component.ts #

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

@Component({
  selector: 'sidemenu',
  templateUrl: 'sidemenu.html'
})
export class SideMenuComponent {
  @Input() nav;
  @ViewChild(Content) content: Content;

  constructor(private menuCtrl: MenuController) {
    // 获取当前菜单实例，监听关闭前事件
    const menu = this.menuCtrl.getMenu('right'); // 这里的'right'对应你菜单的side属性
    if (menu) {
      menu.ionWillClose.subscribe(() => {
        // 0毫秒表示瞬间滚动到顶部，也可以设成300让滚动有动画
        this.content.scrollToTop(0);
      });
    }
  }
}

这样父组件的sideMenuScrollTop方法和(ionWillClose)绑定都可以删掉，组件自己完成逻辑，更符合组件化的思想。

为什么之前的方法没用？ #

ionClose事件是在菜单完全关闭后触发的，这时候侧边栏的DOM元素已经被移除或者设置为不可见，Content实例的滚动操作无法作用到不可见的元素上，所以调用scrollToTop没有任何效果。而ionWillClose是关闭流程的第一步，此时所有元素都还在，滚动操作能正常执行。

内容的提问来源于stack exchange，提问作者Rodrigo Silva