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 相关文章推荐
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
BootStrap中
Dec 10 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
js实现圆形菜单选择器
Dec 03 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python中类的初始化特殊方法
2017/12/01 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
详解python 注释、变量、类型
2018/08/10 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
高级电工工作职责
2013/11/21 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
保护动物倡议书
2014/04/15 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
房贷收入证明范本
2015/06/12 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书