The front end implements one-click return to the top

1. Realize the effect

2. Implementation principle

The onPageScroll event listens to the page scroll event. When the page scrolls beyond a certain height, a one-click return to the top button is displayed.​ 

wx.pageScrollTo event enables one-click return to the top.
Scroll the page to the target position, supporting positioning by selector and scroll distance.

 3. Implement the code

// pages/actualPage/oneTop/index.js
Page({
 
 
  data: {
    no_scroll: true,
  },
 
 
  onLoad: function (options) {
 
  },
 
 
  onShow: function () {
 
  },
 
  goTop: function (e) {
    if (wx.pageScrollTo) {
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  },
  onPageScroll: function (e) {
    if (e.scrollTop > 200) {
      this.setData({
        no_scroll: false
      });
    } else {
      this.setData({
        no_scroll: true
      });
    }
  }
})

<view class="fix_btn" hidden='{
   
   {no_scroll}}' bindtap="goTop">
  <image class="icon" src="https://i.postimg.cc/NFDWnd3H/image.png"></image>
</view>
<block wx:for="{
   
   {40}}" wx:key="list">
  <view class="item">{
   
   {index+1}}.苏苏</view>
</block>

.fix_btn {
  width: 100rpx;
  height: 100rpx;
  position: fixed;
  z-index: 10;
  bottom: 220rpx;
  right: 20rpx;
}
 
 
.icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
 
.item {
  border-radius: 20rpx;
  margin: 20rpx auto;
  width: 710rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  background-color: #fff;
}