Vue实现返回顶部按钮实例代码
作者:今天代码敲了吗 时间:2024-06-05 09:19:50
前言
本文主要介绍了Vue 实现返回顶部按钮的方法,下面话不多说,来直接看代码吧
实例代码:
<template>
<div class="scrollTop">
<div class="backTop"
@click="backTop">
<button v-show="flag_scroll">
返回顶部
</button>
</div>
//数据源
<div></div>
</div>
</template>
<script>
export default {
name: 'scrollTop',
data() {
return {
flag_scroll: false,
scroll: 0,
}
},
computed: {},
methods: {
//返回顶部事件
backTop() {
document.getElementsByClassName('scrollTop')[0].scrollTop = 0
},
//滑动超过200时显示按钮
handleScroll() {
let scrollTop = document.getElementsByClassName('scrollTop')[0]
.scrollTop
console.log(scrollTop)
if (scrollTop > 200) {
this.flag_scroll = true
} else {
this.flag_scroll = false
}
},
},
mounted() {
window.addEventListener('scroll', this.handleScroll, true)
},
created() { },
}
</script>
<style scoped>
.scrollTop{
width: 100%;
height: 100vh;
overflow-y: scroll;
}
.backTop {
position: fixed;
bottom: 50px;
z-index: 100;
right: 0;
background: white;
}
</style>
来源:https://blog.csdn.net/z772330927/article/details/108992643
标签:vue,返回,顶部
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Pytorch中torch.unsqueeze()与torch.squeeze()函数详细解析
2022-05-22 00:41:57
![](https://img.aspxhome.com/file/2023/2/70882_0s.jpg)
javascript获取select标签选中的值
2024-05-09 10:34:41
Python实现如何根据文件后缀进行分类
2023-12-11 07:46:40
![](https://img.aspxhome.com/file/2023/7/118527_0s.png)
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2024-01-18 13:21:33
![](https://img.aspxhome.com/file/2023/5/95735_0s.jpg)
Python利用带权重随机数解决抽奖和游戏爆装备问题
2023-09-21 10:16:43
![](https://img.aspxhome.com/file/2023/5/120345_0s.jpg)
用Python计算三角函数之atan()方法的使用
2023-06-22 22:26:00
用1行Python代码识别身份证信息实例
2022-04-28 12:57:27
![](https://img.aspxhome.com/file/2023/8/87898_0s.jpg)
Apache+php+mysql在windows下的安装与配置(图文)第1/2页
2024-05-11 09:25:34
![](https://img.aspxhome.com/file/2023/0/126210_0s.gif)
Python3中正则模块re.compile、re.match及re.search函数用法详解
2023-04-22 10:03:28
一篇文章彻底弄懂Python中的if __name__ == __main__
2023-04-27 08:42:14
Django跨域请求CSRF的方法示例
2021-07-13 21:09:34
Python基于Webhook实现github自动化部署
2023-09-28 21:31:27
![](https://img.aspxhome.com/file/2023/2/77752_0s.jpg)
python版微信跳一跳游戏辅助
2021-08-16 09:03:19
![](https://img.aspxhome.com/file/2023/8/135128_0s.jpg)
Python引用(import)文件夹下的py文件的方法
2023-09-28 11:14:00
![](https://img.aspxhome.com/file/2023/5/118065_0s.jpg)
Python用字典构建多级菜单功能
2021-06-04 11:26:13
Python numpy下几种fft函数的使用方式
2022-06-21 07:19:55
![](https://img.aspxhome.com/file/2023/0/107180_0s.png)
MySQL UPDATE 语句的非标准实现代码
2024-01-16 19:08:57
python 用matplotlib绘制折线图详情
2022-03-23 16:38:19
![](https://img.aspxhome.com/file/2023/3/92003_0s.png)
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2022-04-15 00:01:01
![](https://img.aspxhome.com/file/2023/0/100980_0s.png)
在ASP中使用SQL语句之11:记录统计
2007-08-11 13:27:00