超详细教程一键回到顶部（附源码）

超详细教程一键回到顶部（附源码）

1. 话不多说，看效果

2.实现
2.1：wxml

		</view>
				<!-- 点击回顶部 -->
				<image src='/image/dingbu.png' class='goTop' hidden='{{showTop}}' bindtap='goTop'>
				</image>
			</view>

2.2：wxss

/* 回到顶部 */
.goTop{
  position: fixed;
  bottom: 20px;
  right: 15px;
  width:50px;
  height: 50px;
}

2.3：js

Page({

  /**
   * 页面的初始数据
   */
  data: {
   showTop：flase
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
//回顶部
onPageScroll: function (e) {
  console.log(e.scrollTop)
  if (e.scrollTop > 300) {
    this.setData({
      showTop: false
    })
  } else {
    this.setData({
      showTop: true
    })
  }
},
goTop: function (e) { // 一键回到顶部
  if (wx.pageScrollTo) {
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  } else {
    wx.showModal({
      title: '提示',
      content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
    })
  }
},
})

3.总结
1.本方法的实现主要是通过image中的bindtap触发GoTop方法。在执行此方法之前，我们需要判断页面的滚动的距离页面顶部的距离时来判断是否需要显示一键回到顶部的图标。这样就会使得操作更加人性化，提升用户的使用体验。
2.在goTop的方法中通过调用API wx.pageScrollTo

4.大家可以关注我的公众号，里面有更多的小程序项目