uni-app回到顶部

1.css样式代码

//template
<view class="updata"  @click="handleup">
			<i class="iconfont icon-huidaodingbu"></i>
		</view>


//css代码

// 回到顶部
	.updata {
		position: fixed;
		right: 50rpx;
		bottom: 80rpx;
		z-index: 999;

		i {
			color: #01524b99;
			font-size: 90rpx;
		}
	}

2.用户滚动到固定位置到顶部的距离显示  //v-show="key"

<view class="updata" v-show="key" @click="handleup">
			<i class="iconfont icon-huidaodingbu"></i>
		</view>

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#%E5%8F%82%E6%95%B0
 

js代码 //位置距离大于x的时候显示

	onPageScroll(e) {
			this.key = e.scrollTop > 100
		}

3.点击回到顶部

https://uniapp.dcloud.net.cn/api/ui/scroll.html#pagescrollto

	handleup() {
				uni.pageScrollTo({
					scrollTop: 0
				})
			}