vue怎么实现回到顶部top效果

本篇内容主要讲解“vue怎么实现回到顶部top效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么实现回到顶部top效果”吧!
html

css
.totop {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 25px;
background-color: white;
position: fixed;
bottom: 75px;
right: 10px;
text-align: center;
}
data
data（） {
return {
toTopShow: false,
srcoll: 0,
}
},
监听事件
watch: {
srcoll（） {
if （this.srcoll > 400） {
this.toTopShow = true;
} else {
this.toTopShow = false;
}
},
},
加载事件
mounted（） {
window.addEventListener（”scroll”, this.srcollShow）;
},
methods：
methods: {
srcollShow（） {
this.srcoll =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
},
toTop（） {
this.toTopSpeed = setInterval（（） => {
document.documentElement.scrollTop =
document.documentElement.scrollTop – 20;
//通过改变数字实现动画延迟滚动
if （this.srcoll

clearInterval（this.to免费云主机、域名TopSpeed）;
}
}, 1）;
},
}
以上操作实现通过监听滚动条>400后，top按钮出现，并且点击top按钮，慢慢回到顶部，低于400隐藏，img以此类推到此，相信大家对“vue怎么实现回到顶部top效果”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: javascript中float指的是什么

这篇文章主要介绍“javascript中float指的是什么”，在日常操作中，相信很多人在javascript中float指的是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”javascript中float指的是什么”的疑惑…