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中的new的使用方法与注意事项
May 16 Javascript
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 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
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
php 文本文件的读取效率
2012/02/10 PHP
十大使用PHP框架的理由
2015/09/26 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
php中的登陆login实例代码
2016/06/20 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
基于python实现学生信息管理系统
2019/11/22 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
可口可乐广告词
2014/03/20 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
邀请函范文
2015/02/02 职场文书
庆祝教师节主题班会
2015/08/17 职场文书