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 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
javascript中var的重要性分析
Feb 11 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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新手上路(三)
2006/10/09 PHP
实用函数8
2007/11/08 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
js几个验证函数代码
2010/03/25 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
微信小程序如何获取用户收货地址
2018/11/27 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python抽象类的新写法
2015/06/18 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
浅谈Django的缓存机制
2018/08/23 Python
python实现Virginia无密钥解密
2019/03/20 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
Python使用Pygame绘制时钟
2020/11/29 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
人事文员岗位职责
2015/02/04 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python