ionic3实现三种回顶部操作

第一种：

用id获取模板中content中最高的那个元素，给元素设置id：

id="topest"

然后触发方法：

toView(){
    let element = document.getElementById("topest");
    if(element){
      element.scrollIntoView();
}

这也就是我们常说的锚点，这种方法是直接跳到该元素的，体验不是很好，不要用。

第二种：

首先导入：

import { Content } from 'ionic-angular';

然后获取content的实例：

@ViewChild(Content) content: Content;

然后调用content的scrollToTop()

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

这种是滚动上去的。
然而，当content设置为fullscreen时，header会覆盖一部分（不会完全滑动上去），如图：

所以

第三种方法：

滚动到指定坐标位置，三个参数依次为坐标x，y，滚动时间(毫秒单位)。

scrollTo(){
    this.content.scrollTo(0, 0, 300)
}

第二种的scrollToTop()，还有这个scrollTo(0, 0, 300)都是content的方法。更多详情请参考官网。我开始学的时候，就看到它是content标签，其他就不管了。后来再回去看时，发现还有很多有用的内容。这再次告诉我们，多看官网是没错的。

以上的方法在哪里触发呢，常见的就是用个FabButton，另一种就是双击顶部（如微信朋友圈）

FabButton：FabButton翻译

翻译得不是很好哈。
然而FabButton一直放在那里，也不是很好，下面实现滚动到底部时显示，回到顶部后隐藏：
给FabButton添加：

*ngIf="top"

给content添加事件，当滚动时触发：(ionScroll)=”check()”
在ts中，top=false；
check():content有个属性scrollTop，为可见视图的最高元素到content顶部的距离（可理解为向下滑动的距离），滑动时，检查它是否大于指定距离，如果为true，则设置top为true，以显示FabButton。

check(){
      if(this.content.scrollTop>400){
        this.top = true;
      }else{
        this.top = false;
      }
      this.cd.detectChanges();
  }

但是，ng并没有智能到一有数据变更就能自动检测到的，有些特殊情况，并没有触发ng的变更检测。所以当你已经滑下来了，页面是没有显示FabButton的。
解决：手动触发变更检测，以渲染模板
首先，在ts导入：

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

然后在构造函数里注入：

constructor(private cd: ChangeDetectorRef)

最终在更新变量后，手动调用代码，强制页面检查刷新即可：

this.cd.detectChanges();

然而，button突变式的显示与消失，也不好，哈哈。可以为其添加进场与离场动画哦。

双击回顶部

这个没什么好说的，就像微信朋友圈那样，在title绑定双击事件(dblclick)就可以了

末学菜鸟一只，如有错误请指出，不胜感激。