小程序点击回到顶部

一丶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
    })
 }