如图所示 
文章图片
HTML 滚动条
...
返回顶部按钮
CSS
.to-top{
width: 70upx;
height: 70upx;
border-radius: 50%;
background-color: #4a81f6;
position: fixed;
right: 23upx;
bottom: 300upx;
z-index: 9999;
box-shadow: 0px 3px 5px 3px #93a2c1;
@include flex($content:center);
image{
width: 36upx;
height: auto;
}
}
JS 数据
data(){
return{
//滚动条位置
scrollTop:0, //
old: {
scrollTop: 0
}
}
}
【小程序|关于uniapp回到顶部-支持小程序与H5】返回顶部事件
/**
* 返回顶部
*/
//记录滚动条位置
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop
},
//记录滚动条位置
goTop: function(e) {
this.scrollTop = this.old.scrollTop
//在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
this.$nextTick(function() {
this.scrollTop = 0
});
},
推荐阅读
- 小程序|【视频倒放神器】超级玩法（千万不要倒放视频，太魔性了根本停不下来......）
- 小程序|最难忘的新年祝福，第一个让大家都惊喜的小程序（有趣、恶搞、好玩）
- 小程序|【自制壁纸生成器】2022新年壁纸领取，换一张手机壁纸，迎接2022叭~
- 白皮书|阿拉丁指数丨《2021 年度小程序互联网发展白皮书》4.5 亿+DAU 小程序的 6 大发展趋势
- 学习笔记|uni-app开发小程序
- 微信小程序的广告方式有哪些
- 公众号关联微信小程序功能介绍
- 微信小程序|微信小程序从入门到入土教程(02)
- 小程序|小程序性能优化的一些实践