小程序点击回到顶部

一丶scroll-view标签包裹的回到顶部
1.标签上增加两个事件
bindscroll=“scrollPosition”
scroll-top="{ {topPosition}}"

<scroll-view scroll-y="true" bindscroll="scrollPosition" scroll-top="{
      {topPosition}}">
我是滚动区域
scroll-view>

<block wx:if="{
      {showBackTop}}">
	<view class="backTop" bindtap="onBackTop">
		<image mode="widthFix" src="https://sucai.suoluomei.cn/sucai_zs/images/20200914102732-hddb.png">image>
	view>
block>

data:{
     
    showBackTop: false, //回到顶部按钮
    topPosition: 0, //顶部距离
  }
  // 实时计算滚动高度
  scrollPosition(e) {
     
    const position = e.detail.scrollTop;
    this.setData({
     
      showBackTop: position > 500
    })
  },
  // 点击回到顶部
  onBackTop() {
     
    this.setData({
     
      showBackTop: false,
      topPosition: 0,
    })
  },

二丶view标签回到顶部

//点击事件
onBackTop(){
     
    wx.pageScrollTo({
     
      scrollTop: 0,
      duration: 1000
    })
 }