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 相关文章推荐
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
详解node中创建服务进程
May 09 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP多进程编程实例
2014/10/15 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
Python re模块介绍
2014/11/30 Python
Python中集合类型(set)学习小结
2015/01/28 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
python实现名片管理器的示例代码
2019/12/17 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
质量保证书范本
2014/04/29 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
自查自纠整改报告
2014/11/06 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers