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中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
node 版本切换的实现
Feb 02 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
PHP 引用是个坏习惯
2010/03/12 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
jquery isType() 类型判断代码
2011/02/14 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
python求素数示例分享
2014/02/16 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
浅谈python数据类型及类型转换
2017/12/18 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
基于python检查矩阵计算结果
2020/05/21 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
安全生产投入制度
2014/01/29 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
支教个人总结
2015/03/04 职场文书
增值税发票丢失证明
2015/06/19 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS