小程序|关于uniapp回到顶部-支持小程序与H5 H5|uniapp|手机端

如图所示
文章图片

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 }); },