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温习的一些笔记 基础常用知识小结
Jun 22 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
AngularJS 控制器 controller的详解
Oct 17 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
5个实用的JavaScript新特性
Jun 16 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
vue组件实例解析
2017/01/10 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python反射的用法实例分析
2018/02/11 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python匿名函数的使用方法解析
2019/10/10 Python
python各层级目录下import方法代码实例
2020/01/20 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
法定代表人证明书
2014/11/28 职场文书
骨干教师申报材料
2014/12/17 职场文书
2014年个人总结范文
2015/03/09 职场文书
小学生读书笔记范文
2015/06/30 职场文书
赡养老人协议书范本
2015/08/06 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
解决Oracle数据库用户密码过期
2022/05/11 Oracle