uni-app 页面滑动距离后出现回到顶部按钮，回到顶部

haoqi好奇

于 2019-12-13 17:24:50 发布

阅读量8.1k

点赞数 3

分类专栏： uni-app 前端 Vue

本文链接：https://blog.csdn.net/qq_41956789/article/details/103530842

版权

前端同时被 3 个专栏收录

45 篇文章

订阅专栏

Vue

29 篇文章

订阅专栏

uni-app

13 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个响应式的回顶按钮。该按钮会在用户滚动页面超过一定距离时出现，点击后能平滑地将页面滚动到顶部。通过监听页面滚动事件，动态显示或隐藏回顶图标，提升用户体验。

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

html

<view class="top" :style="{'display':(flag===true? 'block':'none')}">
  <uni-icons class="topc" type="arrowthinup" size="50" @click="top"></uni-icons>
</view>

data() {
      return {
	       flag:false
        }
},
methods: {
	top() { //回到顶部
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	},
	onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		if(e.scrollTop>600){ //当距离大于600时显示回到顶部按钮
			this.flag=true
		}else{ //当距离小于600时隐藏回到顶部按钮
			this.flag=false
		}
	},
}

css

/* 回到顶部 */
	.top {
		position: relative;
		display: none; /* 先将元素隐藏 */
	}

	.topc {
		position: fixed;
		right: 0;
		background: #F0F0F0;
		top: 70%;
		height: 50px;
		line-height: 50px;
	}