vue实现回到顶部

最新推荐文章于 2023-06-09 09:19:37 发布

原创最新推荐文章于 2023-06-09 09:19:37 发布 · 588 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

本文介绍了一个前端开发中的交互设计，通过监听`$refs.home`元素的滚动事件，实现当页面滚动到一定高度时，自动平滑滚动至顶部并显示隐藏的返回按钮。关键在于判断滚动位置并动态控制返回操作的显示与隐藏。

回到顶部

<div ref='home'></div>
<span class="hui" v-show="huiShow" @click="huiTop">回到顶部</span>

1. 首先获取最外层盒子的dom

2. 监听这个盒子的滚动事件

mounted() {
    this.$refs.home.addEventListener('scroll',this.handlerscroll)
},
destroyed(){
    this.$refs.home.removeEventListener('scroll',this.handlerscroll)
},
methods: {
	huiTop() {
		this.$refs.home.scroll({
        	top:0,
        	// 控制向上的时候是缓慢的向上移动
        	behavior:'smooth'
      	})
	},
	handlerscroll() {
		// Math.ceil向上取整 距离顶部的高度如果大于100 就让回到顶部span显示 否则隐藏
		if(Math.ceil(this.$refs.home.scrollTop) >= 100) {
        	this.huiShow = true
      	} else {
        	this.huiShow = false
      	}
	}