vue实现移动端返回顶部


Posted in Javascript onOctober 12, 2020

本文实例为大家分享了vue实现移动端返回顶部的具体代码,供大家参考,具体内容如下

HTML:

<template>
 <div class="home">
  <div v-for="ys in 100" :key="ys">
   <p>1</p>
  </div>
  <div @click="back" class="back1" v-show="isShow">▲</div>
 </div>
</template>

JS:

<script>
export default {
 data() {
  return {
   isShow: true
  };
 },

 handleScroll() {// handleScroll 和 methods 是同级
   if (window.pageYOffset > 300) {
    //window.pageYOffset:获取滚动距离
    this.isShow = true;
   } else {
    this.isShow = false;
   }
   // console.log(window.pageYOffset);
  },

 methods: {
  //点击事件:
  back() {
   //返回顶部 $这个地方需要引入在线jq
   //<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   $("html")
    .stop()
    .animate(
     //animate:动画 点击时让它行动
     {
      scrollTop: 0 //距离顶部为0
     },
     1000 //多少时间完成行动
    );
  }
 }
};
</script>

CSS:

<style scoped>
.back1 {
 width: 50px;
 height: 50px;
 background: #eee;
 position: fixed;
 right: 5px;
 bottom: 50px;
 z-index: 1000;
 text-align: center;
 line-height: 50px;
}
</style>

之前小编看到的一篇文章分享给大家: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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
js中作用域的实例解析
Mar 16 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 #Javascript
手机浏览器唤起微信分享(JS)
Oct 11 #Javascript
js canvas实现俄罗斯方块
Oct 11 #Javascript
利用js canvas实现五子棋游戏
Oct 11 #Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 #Javascript
原生js生成图片验证码
Oct 11 #Javascript
js实现石头剪刀布游戏
Oct 11 #Javascript
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
详解Bootstrap按钮
2016/01/04 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
24式加速你的Python(小结)
2019/06/13 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
构造方法和其他方法的区别
2016/04/26 面试题
户外拓展活动方案
2014/02/11 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
工程部主管岗位职责
2015/02/12 职场文书
个人先进事迹总结
2015/02/26 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python