Vue实现返回顶部按钮实例代码


Posted in Javascript onOctober 21, 2020

前言

本文主要介绍了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>

总结

到此这篇关于Vue实现返回顶部按钮的文章就介绍到这了,更多相关Vue返回顶部按钮内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ExtJs使用IFrame的实现代码
Mar 24 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
浅析js封装和作用域
Jul 09 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 #Javascript
uniapp实现可滑动选项卡
Oct 21 #Javascript
element中table高度自适应的实现
Oct 21 #Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 #Javascript
原生小程序封装跑马灯效果
Oct 21 #Javascript
uniapp实现横向滚动选择日期
Oct 21 #Javascript
实现vuex原理的示例
Oct 21 #Javascript
You might like
PHP If Else(elsefi) 语句
2013/04/07 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
Vue精简版风格概述
2018/01/30 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
进一步了解Python中的XML 工具
2015/04/13 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
python中logging包的使用总结
2018/02/28 Python
Tesserocr库的正确安装方式
2018/10/19 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Python调用C语言的实现
2019/07/26 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
PyTorch安装与基本使用详解
2020/08/31 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
python破解同事的压缩包密码
2020/10/14 Python
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
社区党员先进事迹
2014/01/22 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
党员公开承诺事项
2014/03/25 职场文书
法语专业求职信
2014/07/20 职场文书
高一军训感想
2015/08/07 职场文书