回到顶部功能

最新推荐文章于 2024-07-16 16:43:05 发布

Spider@囚童

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量249

点赞数 2

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq2877885856/article/details/122311662

版权

    ref用于下面获取dom节点
	<html ref='home'>	
	<span class="topBtn" v-show="topShow" @click="topHui">回到顶部</span>
	</html>

	mounted() {
	    获取上面的html元素refs是vue提供的获取元素的方法
    	this.$refs.home.addEventListener('scroll',this.handlerscroll)
	},
	destroyed(){
	    解绑html元素
    	this.$refs.home.removeEventListener('scroll',this.handlerscroll)
	},
	methods: {
	topHui() {
		this.$refs.home.scroll({
        	top:0,
        	// 控制向上的时候是缓慢的向上移动
        	behavior:'smooth'
      	})
	},
	//监听用户滚动如果大于100时显示回到顶部按钮
	handlerscroll() {
		// Math.ceil向上取整 距离顶部的高度如果大于100 就让回到顶部span显示 否则隐藏
		if(Math.ceil(this.$refs.home.scrollTop) >= 100) {
        	this.topShow = true
      	} else {
        	this.topShow = false
      	}
	}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Spider@囚童

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
回到顶部功能

ref用于下面获取dom节点 <div ref='home'></div> <span class="topBtn" v-show="topShow" @click="topHui">回到顶部</span> mounted() { 获取html元素refs是vue提供的获取元素的方法 this.$refs.home.addEventListener('scroll',this.handlerscroll) }, des...
复制链接

扫一扫