Vue实现回到顶部和底部动画效果


Posted in Javascript onJuly 31, 2019

本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下

Vue实现回到顶部和底部动画效果

代码:

<template>
 <div>
  <div class="scroll" :class="{show:isActive}">
   <div id="toTop" @click="toTop(step)"><</div>
   <div id="toBottom" @click="toBottom(step)">></div>
  </div>
 </div>
</template>
<script>
 export default{
  props:{
   step:{ //此数据是控制动画快慢的
    type:Number,
    default:50 
   }
  },
  data(){
   return {
    isActive:false,
   }
  },
  methods:{
   toTop(i){
    //参数i表示间隔的幅度大小,以此来控制速度
    document.documentElement.scrollTop-=i;
    if (document.documentElement.scrollTop>0) {
     var c=setTimeout(()=>this.toTop(i),16);
    }else {
     clearTimeout(c);
    }
   },
   toBottom(i){
    var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
    var scrollHeight=document.documentElement.scrollHeight;
    var height=scrollHeight-clientHeight; //超出窗口上界的值就是底部的scrolTop的值
    document.documentElement.scrollTop+=i;
    if (document.documentElement.scrollTop<height) {
     var c=setTimeout(()=>this.toBottom(i),16);
    }else {
     clearTimeout(c);
    }
   }
  },
  created(){
   var vm=this;
   window.οnscrοll=function(){
    if (document.documentElement.scrollTop>60) {
     vm.isActive=true;
    }else {
     vm.isActive=false;
    }
   }
  }
 }
</script>
<style scoped>
 .scroll{
   position: fixed;
   right: 10px;
   bottom: 60px;
   width: 45px;
   height: 90px;
   cursor: pointer;
   display: none;
  }
  .scroll>div{
   width: 45px;
   height: 45px;
   transform: rotate(90deg);
   line-height: 45px;
   text-align: center;
   font-size: 35px;
   font-family: "黑体";
   background-color: rgba(0,0,0,.2);
   color: #fff;
  }
  .scroll>div:hover{
   background-color: rgba(0,0,0,.5);
  }
  .show{
   display: block;
  }
</style>

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

Javascript 相关文章推荐
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 #Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 #Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 #Javascript
原生js代码能实现call和bind吗
Jul 31 #Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 #Javascript
javascript中undefined的本质解析
Jul 31 #Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 #Javascript
You might like
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PHP脚本数据库功能详解(中)
2006/10/09 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
js实现筛选功能
2020/11/24 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
css3发光搜索表单分享
2014/04/11 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
应届生服务员求职信
2013/10/31 职场文书
上班离岗检讨书
2014/01/27 职场文书
仓库主管岗位职责
2014/03/02 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
离职报告格式
2014/11/04 职场文书
通知格式
2015/04/27 职场文书
地震捐款简报
2015/07/21 职场文书
推广普通话主题班会
2015/08/17 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
Win11 BitLocker 驱动器加密
2022/04/19 数码科技