前言:
最近在做angular项目, pc跟wap自适应, 采用ng14+ng-zorro + n-z-mobile, 因为不用做app端, 所以没用ionic.
项目中有个下拉刷新的, 需要回到顶部功能.下拉刷新用了nz-mobile的PullToRefresh组件, 问题就出在这, 该组件没有提供回到顶部的api, 只有上拉/下拉功能(本人angular中没用过better-scroll, 不知道能不能用).
后面百度找了一堆资料, 全是$(window).scroll(0, 0)或者animate({scrollTop: 0}, 300), 试了, 一点用没有.
正题
1. 找到滚动元素
滚动需要用scrollTop, 而如果元素的scrollTop一直都是0的话是没有回到顶部功能的.
就比如我做的这个项目为例:
我们需要找到真实产生滚动条的那个元素, 如图:
我找了一下, 发现高度最小的就是以下2个: 父元素 .h5-wrap-refresh高度大于子元素pulltorefresh, pulltorefresh的高度是最小, 获取他的scrollTop看了下(pulltorefresh可以直接通过getElementsByTagName获取, 结果显示不为0), 果然滚动条就是他产生的.
image.png
2.直接js走起
// 回到顶部
moveToTop(elementName = '', elementIndex = 0) {
let documentName: any = document.getElementsByTagName(elementName)[elementIndex]
|| document.getElementsByClassName(elementName)[elementIndex]
|| document.getElementById(elementName)
|| document.documentElement;
function move() { // 动画运行中函数
if(documentName.scrollTop > 0){
documentName.scrollTop *= 0.83; // 先快后慢的过渡
requestAnimationFrame(move);
}
}
move();
}
注意: 如果双击的话记得禁止掉移动端的双击缩放功能
// 双击标题中心回到顶部
touchListener() {
// 需要监听的点击位置 整个屏幕则为documentElement
let navTab = document.getElementsByClassName('center')[0];
let that = this;
navTab.addEventListener('touchstart', function(e) {
// 禁止移动端双击缩放
e.preventDefault();
// 设置300ms
that.startTime;
let t = new Date().getTime();
if (t - that.startTime < 300) {
that.moveToTop();
}
that.startTime = t;
})
}
