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

 更新时间:2019年07月31日 16:03:11   作者:zzh1918  
这篇文章主要为大家详细介绍了Vue实现回到顶部和底部动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

代码:

<template>
 <div>
  <div class="scroll" :class="{show:isActive}">
   <div id="toTop" @click="toTop(step)">&lt;</div>
   <div id="toBottom" @click="toBottom(step)">&gt;</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>

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

相关文章

  • Element中el-form表单举例详解

    Element中el-form表单举例详解

    Form组件提供了表单验证的功能,只需要通过属性传入约定的验证规则,并将Form-Item的属性设置为需校验的字段名即可,下面这篇文章主要给大家介绍了关于Element中el-form表单的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue2 如何实现div contenteditable=“true”(类似于v-model)的效果

    vue2 如何实现div contenteditable=“true”(类似于v-model)的效果

    这篇文章主要给大家介绍了利用vue2如何实现div contenteditable="true",就是类似于v-model的效果,文中给出了两种解决的思路,对大家具有一定的参考价值,有需要的朋友们下面来一起看看吧。
    2017-02-02
  • Vue路由传参的三种方式实例详解

    Vue路由传参的三种方式实例详解

    vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于Vue路由传参的三种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • 详解Vue的mixin策略

    详解Vue的mixin策略

    这篇文章主要介绍了Vue的mixin策略的相关资料,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • vue+echarts实现多条折线图

    vue+echarts实现多条折线图

    这篇文章主要为大家详细介绍了vue+echarts实现多条折线图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解vue中v-for和v-if一起使用的替代方法template

    详解vue中v-for和v-if一起使用的替代方法template

    这篇文章主要介绍了vue中v-for和v-if一起使用的替代方法template,使用的版本是vue 2.9.6和element-ui: 2.15.6,通过实例代码给大家讲解的非常详细,需要的朋友可以参考下
    2022-05-05
  • vue双向绑定的简单实现

    vue双向绑定的简单实现

    这篇文章主要为大家详细介绍了vue双向绑定的简单实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Vue中使用jsencrypt进行RSA非对称加密的操作方法

    Vue中使用jsencrypt进行RSA非对称加密的操作方法

    这篇文章主要介绍了Vue中使用jsencrypt进行RSA非对称加密,在这里需要注意要加密的数据必须是字符串,对Vue RSA非对称加密相关知识感兴趣的朋友一起看看吧
    2022-04-04
  • Vue+tracking.js 实现前端人脸检测功能

    Vue+tracking.js 实现前端人脸检测功能

    这篇文章主要介绍了Vue+tracking.js 实现前端人脸检测功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 用Vue.js实现监听属性的变化

    用Vue.js实现监听属性的变化

    响应系统是Vue.js的一个显著功能,修改属性,可以更新视图,这让状态管理变得非常简单且直观。这篇文章主要给大家介绍如何利用Vue.js实现观察属性的变化,有需要的朋友们可以参考借鉴,感兴趣的朋友们下面来一起看看吧。
    2016-11-11

最新评论