微信小程序的回到顶部和去到底部(或者去到任意位置功能)

回到顶部

wxml代码

<!-- 添加一个回到顶部的功能按键 -->
<button type="default" style="display:inline-block;position:fixed;bottom:80px;right:10px;z-index:10;width:130rpx;border-radius:50%;" bindtap="backToTop">顶部</button>

js代码

// 回到顶部功能
 backToTop() {
   wx.pageScrollTo({
     scrollTop:0
   })
 },

去到底部

wxml代码

<!-- 添加一个去到底部的功能按键 -->
<button type="default" style="display:inline-block;position:fixed;bottom:5px;right:10px;z-index:10;width:130rpx;border-radius:50%;" bindtap="goToBottom">底部</button>

js代码

 // 去到底部，bottom是一个处于最底下的空元素，该函数是定位class=“bottom”的底部元素
  goToBottom() {
    wx.createSelectorQuery().select('.bottom').boundingClientRect(function (rect) {
      // 使页面滚动到底部
      wx.pageScrollTo({
        scrollTop: rect.bottom
      })
    }).exec()
  },

需要定位到其他特定位置的时候，将wx.createSelectorQuery().select(’.bottom’).boundingClientRect(function (rect)中的bottom换为所需要定位的类名或者id名等即可

效果图如下