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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 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
关于js和php对url编码的处理方法
2014/03/04 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python读写csv文件实例代码
2019/07/05 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
个人作风剖析材料
2014/02/02 职场文书
假面舞会策划方案
2014/05/29 职场文书
初级党校心得体会
2014/09/11 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
申报优秀教师材料
2014/12/16 职场文书
防暑降温通知书
2015/04/27 职场文书
同步小康驻村工作简报
2015/07/20 职场文书