第一种：
用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)就可以了
末学菜鸟一只，如有错误请指出，不胜感激。
网友评论