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

最新推荐文章于 2025-06-24 22:39:30 发布

原创

最新推荐文章于 2025-06-24 22:39:30 发布 · 5.7k 阅读

4 ·

CC 4.0 BY-SA版权

这篇博客详细介绍了如何在uniapp中实现返回顶部功能，适用于小程序和H5平台。通过HTML创建滚动条和返回顶部按钮，CSS进行样式设置，JS处理数据和返回顶部事件，实现了无缝兼容的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示

在这里插入图片描述

HTML

滚动条

<scroll-view class="wrap" scroll-y='true' :scroll-top="scrollTop" @scroll="scroll" scroll-with-animation='true'>...</scroll-view>

返回顶部按钮

		<view class="to-top" @click="goTop">
			<image src="../../../static/lesson/top.png" mode="widthFix"></image>
		</view>

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