微信小程序 返回顶部

wxml代码：

<view class='note'>第一种方案</view>
<scroll-view class='scroll' scroll-top="{{scrollTop}}" scroll-y="true" bindscroll="scrll" style='height:100%'>
  <view class="block">11111</view>
  <view class="block">22</view>
  <view class="block">33</view>
  <view class="block">44</view>
  <view class="block">5555</view>
  <view class="block">666</view>
</scroll-view>
<view class="top" hidden="{{hidden}}" catchtap="goTop"></view>

wxss代码:

page{height:100%}
.note{ padding:10px; background:#f36; border-bottom:1px solid #ddd; color: #fff;}
.block {
  border: 8px solid #71b471;
  margin: 20rpx 20rpx;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 20rpx;
  text-align: center;
  height:700rpx;
}
.top {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  /* background-color: #ddd; */
  position: fixed;
  bottom: 40rpx;
  right: 20rpx;
  text-align: center;
  font-size: 50rpx;
  opacity: .8;
  border-radius: 50%;
  border: 1px solid #fff; 
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEZUlEQVR4Xu1biVEVQRDtjUCIQI1AiACJQIgAicA2AiEC2wiECCQDIQI/ESgRqBGM9bZmcHb/zt+5eg90qrYK6u8c701PX9PbkHJj5r2maY6MMQdEhGePiF7Yx5/9BxHh+UVEm6ZpNsaYOxHB/2qt0RiZmQH0jIheW9Al02yI6JaIrkUEf1dt1QiwO31mjHlbAXQIJCTjyhgDMqpIRjEBAE5E74iIrXhX3aHAYAAvRPSplIgiApj5hIg+Twi8zweIOBeRm1zWswhgZigxAMcZX0KDjgARUKJJLZmABex6CGCWNCQRwMwf7VlPYnnily9E5DJ2zmgCmBkiDw2/hnYlIucxC40iYGXgHe4oEkYJWCn4aBJ2EsDMsLWw8WtulyJyEQIQJMBq+y9rRu6t/TTkKwwSYO38txkdnNq8w0QeDvkJIQK+LsjJqUXGrYgc9wfbIuCJiX4f79ZR6BBgA5vvT0j0h2KHl34A1ScA2vJDLZlb6Dgdq/BIQKXdf7BZHU3sCMSeF0wAhfgoBT4BiOfh6+e2nfY2d9ChfsxcKqnvRQQ+DvkEwOwhlZXVRGTUq8waONCJmU3BeBsROXwkwObwQEBJg1glx+M5E1o/Bcq6pMEv2LS7VsnlRb4OolklV7cD2Z4xBvNkS6sdG+k0dgQUiX/JNszYtz0GjdX+P2dcyJxT74MAJDbnCHrurbvtEqtzEHEKAkpNSs7CW/DOI7NKGInNZzmDFfS5BAFIKb8pGCS1awe86zwTCdcgAMwfpaLIfH8Q/Iwk3IEA2FO4l9rtGhZ37CbH2nhI5SvtBbWXsIUeVewacZcXnVG2lgmSqU7CFAQkgfeOA+4c1UnQJiALfI8EHAc1HaVJQBF4/2wx85WtN4g9ctHvgQAEMCXx9dBk1cB70qBBwoOGGawOXpGE1gzWdoQQDUKB+S3qmqon9nCR+1YA4yJxU6u1jtAkrnBqwmQi89y6wpMEQwsloA2GIFbq4fBCCdh3CRGUn6l6XQsk4F5EDmqmxHYqpgUS0EmJIb9WmhRdGwF/k6JYOTOrHoOFSUAr/sBd82JkzDbvj4XCvRhAUzGjpA6eZYcAWAO4xVppqbYIeowl+7srqo58Pem138h/uM34fznacz+1pSBpqxRexuXtQfB63CrDSTxDBXAxQ+4ukPCU0JSJ0piF13gHH19s1TbvKpKCwtJSiDUApYzRUXx+x3+lTO5YRCDVW22sUHKSUDllKzPezSuU9PSBRioqA0dWl9HsVFRVh2ZSMgtWXKdR8B1PcGzMlZEQBT6JAOsjrKF4OqlYK+oI9LxFOErQC0szkTB1JyFtH5LwZAKsJOAyFSSo3diMHcne73cWfHJ9UhYBnoWYWxrg2+PGedrP5npHwuXqka+f6lhA3KGPUO+YvOtRnmCiCCKjBCJwBY5HK8GKAgsAvykF7vAVHYEQSbbcBUQg+CglA6DhxuJ2KTahEr1/KgQMHBH3Fbn7bH6o4NkVWrvP6NuvxmvtdIiRP3RowHtt7Hx7AAAAAElFTkSuQmCC) no-repeat; background-size: 100%
}

js代码：

Page({
  data: {
    scrollTop: 0,//滚动初始值
    hidden: true//隐藏
  },
  scrll: function (e) {
    console.log(e.detail);  
    var scrollTop = e.detail.scrollTop
    console.log(scrollTop)
    if (scrollTop > 100) {
      this.setData({
        hidden: false
      })
      console.log(this.data.scrollTop)
    } else {
      this.setData({
        hidden: true
      });
    }
  },
  //返回到顶部
  goTop: function (e) {
    this.setData({
      scrollTop: 0,
      hidden: true
    })
  }

})