angular 移动端回到顶部功能(不依赖ionic)

前言:

最近在做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;
    })
  }