vue底部跳转_Vue实现回到顶部和底部动画效果

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

代码：

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

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;

}

.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;

}

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

vue底部跳转_Vue实现回到顶部和底部动画效果相关推荐

vue 返回滚动条顶部组件_vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
vue路由跳转页面滚动到顶部
如果想在vue路由跳转后滚动到指定的位置,只需要调用内置方法(scrollBehavior)官网地址链接: https://router.vuejs.org/zh/guide/advanced/scr ...
如何利用原生JS实现回到顶部以及吸顶效果
<style>.box1{width: 1200px;height: 800px;background-color: pink;margin: 0 auto;}.box2{width: 1 ...
vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...
子菜单的展开.收缩功能在许多系统上都很常见,如果想要在打开收起时带有动画效果,过去常常会通过 jQuery 实现.而在 Vue 项目中,我们可以单独封装一个动画组件,方便使用. 1,效果图点击一级菜 ...
Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例
说明 wowjs-当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退. 安装 npm install wowjs --save-dev npm install animate.css --sa ...
vue实现多个元素或多个组件之间动画效果
2019独角兽企业重金招聘Python工程师标准>>> 多个元素的过渡 <style>.v-enter,.v-leave-to{opacity: 0;}.v-enter- ...
Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <template><div><h2>动画效果 ...
html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...
学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果.下面会介绍我在项目中实现抛物运动的简单方法. 知识点:css3动画(抛物线运动).vue动态绑定事件(控制小球出 ...
vue底部跳转_Vue中底部tabBar切换及跳转
tabBar.vue文件,写法如下: {{item.title}} tabBar.vue 中 js export default { name: "Tabbar", data(){ ...

vue底部跳转_Vue实现回到顶部和底部动画效果

vue底部跳转_Vue实现回到顶部和底部动画效果相关推荐

最新文章

热门文章