关于uniapp回到顶部-支持小程序与H5

如图所示

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 
				}
	}
}

返回顶部事件

			/**
			 * 返回顶部
			 */
				//记录滚动条位置
			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
				});
			},