回到顶部
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名等即可
效果图如下