Vue实现回到顶部和底部动画效果
2019-07-31 16:03
1781 查看
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- vue.js实现回到顶部动画效果
- jQuery实现带有动画效果的回到顶部和底部代码
- jQuery实现带有动画效果的回到顶部和底部代码
- jquery实现"跳到底部","回到顶部"效果(类似锚)
- jquery实现"跳到底部","回到顶部"效果
- vue 回到顶部简单动画效果
- JS实现回到页面顶部动画效果的简单实例
- jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
- SpringAnimation 实现菜单从顶部弹出从底部消失动画效果
- jquery实现"跳到底部","回到顶部"效果
- JS实现回到页面顶部动画效果 2016.03.23
- 【Android UI设计与开发】第15期:顶部标题栏(六)实现悬浮式顶部和底部标题栏效果
- android窗体动画:activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失的动画实现
- vue实现app页面切换动画效果实例
- vue-router实现webApp切换页面动画效果代码
- 用jquery实现动画跳到顶部和底部(这个比较简单)
- 顶部固定显示;某模块的标题栏在滚动时固定显示;到底部时显示底部banner;回到顶部。4个效果
- vue实现多个元素或多个组件之间动画效果
- iOS实现点击状态栏自动回到顶部效果详解
- Vue.js实现微信过渡动画左右切换效果