点击按钮回到顶部

1.uniapp项目

html

topShow在data中定义默认为false

	<view class="arrowUp"   v-if="topShow"
		 @click="toTop">
			<!-- :class="topShow?'arrowUp':'arrowNone'" @click="toTop"> -->
			<image src="@/static/aichooseSchool/ic_up_arrow.png" mode="aspectFill"></image>
		</view>

css

.arrowUp{
		position:fixed;
		background-color: #fff;
		bottom: 200rpx;
		right: 80rpx;
		z-index: 80;
		width: 80rpx;
		height: 80rpx;
		display: block;
		animation:  toUp 0.3s;
		@keyframes toUp {
			0%{
				right: -80rpx;
			}
			100%{
				right:80rpx;
			}
		}
		>image{
			width: 100%;
			height: 100%;
		}
	}

页面滚动事件与onLoad,onShow同级 

onPageScroll(e) {
        this.topShow = e.scrollTop > 600
    },

 可参考官网 uni.pageScrollTo(OBJECT) | uni-app官网

	//回到顶部
		toTop(){
			uni.pageScrollTo({
								scrollTop: 0,
								duration: 300
							});

		},

2.vue项目

 <img src="../../../assets/images/ic_toTop_default.png" class="imgStyle" v-if="btnFlag" @click="toTop" />

btnFlag在data中默认定义false

mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },

  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },

methods:{

    //回到顶部
    toTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },

   // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.scrollTop = scrollTop;
      if (this.scrollTop > 200) {
        this.btnFlag = true;
      } else {
        this.btnFlag = false;
        this.indexAnchor = false;
      }
      if (this.scrollTop > 500) {
        this.indexAnchor = true;
      } else {
        this.indexAnchor = false;
      }
    },

}