Applet Click to return to the top 2 methods

1. Applicable scenario ： Page not used scroll-view Components

（ I have been looking for this method for a long time ）

wxml：（ Find the picture yourself , I won't give it ）

<image src='{
   {img_url}}mp/[email protected]' class='goTop' hidden='{
   {!floorstatus}}' bindtap="goTop"></image>

wxss：

.goTop{
  height: 80rpx;
  width: 80rpx;
  position: fixed;
  bottom: 50rpx;
  right: 30rpx;
  border-radius: 50%;
}

js（ On the blackboard ）：

data Give me an initial value ：floorstatus: true,

//  Get the current position of the scroll bar 
  onPageScroll: function (e) {
    console.log(e)
    if (e.scrollTop > 150) {
      this.setData({
        floorstatus: true
      });
    } else {
      this.setData({
        floorstatus: false
      });
    }
  },
  // Back to the top 
  goTop: function (e) {  //  One click back to the top 
    if (wx.pageScrollTo) {
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: ' Tips ',
        content: ' Current wechat version is too low , This feature is not available , Please upgrade to the latest wechat version and try again .'
      })
    }
  },

2. Page used scroll-view Components

The page uses this component , Then you are free , The official documentation of the small program is very clear , Get scroll bar position . Ha ha ha

wxml:

<scroll-view scroll-y scroll-top='{
   {topNum}}' bindscroll="scrolltoupper">
<image src='../../img/button-top.png' class='goTop' hidden='{
   {!floorstatus}}' bindtap="goTop"></image>

css:   css ditto

.goTop{
  height: 80rpx;
  width: 80rpx;
  position: fixed;
  bottom: 50rpx;
  right: 30rpx;
  border-radius: 50%;
}

js：

  data:{
    topNum: 0
  }

  //  Get the current position of the scroll bar 
  scrolltoupper:function(e){
    console.log(e)
    if (e.detail.scrollTop > 100) {
      this.setData({
        floorstatus: true
      });
    } else {
      this.setData({
        floorstatus: false
      });
    }
  },

  // Back to the top 
  goTop: function (e) {  //  One click back to the top 
    this.setData({
      topNum: this.data.topNum = 0
    });
  },

 

2 This method has covered all the scenes . Choose one according to your situation .

Finish off work ！  Pay attention