Vue实现返回顶部按钮实例代码
作者：今天代码敲了吗 发布时间：2024-06-05 09:19:50
标签：vue,返回,顶部
前言
本文主要介绍了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
0
投稿猜你喜欢
最近一直在准备用来面试的几个小demo，为了能展现自己，所以都是亲自设计并实现的，其中一个就是在50行代码内来实现一个贪吃蛇，为了说明鄙人自- MySQL凭借着出色的性能、低廉的成本、丰富的资源，已经成为绝大多数互联网公司的首选关系型数据库。虽然性能出色，但所谓“好马配好鞍”，如何能
- 1.生成日志并通过http传输出去（通过HTTPHandler方式）：#生成并发送日志import loggingfrom logging.
- 本文实例讲述了Centos7.4环境安装lamp-php7.0的方法。分享给大家供大家参考，具体如下：一. 环境准备桥接模式能访问外网#pi
- 在Django model中对一张表的几个字段进行联合约束和联合索引，例如在购物车表中，登录的用户和商品两个字段在一起表示唯一记录。举个栗子
- 本文实例为大家分享了python实现图像拼接的具体代码，供大家参考，具体内容如下1.待拼接的图像2. 基于SIFT特征点和RANSAC方法得
- 本文实例为大家分享了vue更多筛选项小组件的实现方法，供大家参考，具体内容如下效果：就是一个简单的小效果，当有很多筛选条件时，默认只展示几项
- 写在之前首先是写在之前的一些建议：首先是关于这本书，我真的认为他是将神经网络里非常棒的一本书，但你也需要注意，如果你真的想自己动手去实现，那
- 我国移动互联网进入了飞速发展阶段，互联网人才日益受到企业的重视，其中PHP开发人才便是其中之一，在互联网旅游、金融、餐饮、娱乐、社交等一些新
- 前言Python是面向对象的程序设计（Object Oriented Programming）。面向对象的程序设计的一条基本原则是：计算机程
- 本文实例讲述了JS前端加密算法。分享给大家供大家参考，具体如下：解密操作对服务器性能颇有消耗。寻思着能不能在前端完成。于是找到了crypto
- 使用python的json模块序列化时间或者其他不支持的类型时会抛异常，例如下面的代码：# -*- coding: cp936 -*-fro
- 本文实例讲述了Python实现对PPT文件进行截图操作的方法。分享给大家供大家参考。具体分析如下：下面的代码可以为powerpoint文件p
- <!DOCTYPE html> <html> <head> <meta charset="
- 最近在做图片相关的工作，面对各种格式的图片转换，在OpenCV跟Pillow之间来回切换。觉得有必要把这些东西记录下来，以备不时之需。首先介
- 目录楔子上传模块至pypi编写模块编译上传楔子我们在安装第三方包的时候，直接一个pip install xxx命令就搞定了，然后pip会去p
- 第一个问题是重命名数据库问题：在企业管理器中是无法直接对数据库重命名的，只能在查询分析器中操作create proc killspid (@
- 要想成功的进行字符串的匹配需要使用到正则表达式模块，正则表达式匹配规则以及需要被匹配的字符串。在这三个条件中，模块与字符串都是准备好的，只有
- 芬兰数学家因卡拉花费3个月时间设计出的世界上迄今难度最大的数独。数独是 9 横 9 竖共有 81 个格子，同时又分为 9 个九宫格。规则很简
- 主要利用了XMLHTTP的一些方法和属性来获取服务器的信息。 以下是全部源代码： &
