vue 局部回到顶部_vue.js实现回到顶部动画效果

最近使用vue.js做了几个页面，其中有一个回到顶部的动画效果记录下。

html如下：

回到顶部

1

2

3

4

5

回到

顶部

backTop.css如下：

* {

margin: 0px;

padding: 0px;

border: 0;

}

html, body {

width: 100%;

height: 100%;

position: relative;

background: #F2F2F2;

overflow-x: hidden;

overflow-y: auto;

z-index: 1;

}

[v-cloak] {

display: none;

}

.back-to-top {

position: fixed;

bottom: 5px;

right: 20px;

z-index: 100;

border-radius: 5px;

box-shadow: 0px 0px 2px #222;

padding: 8px 10px;

cursor: pointer;

}

.back-to-top:hover {

background: #5AC4D1;

}

.back-to-top:hover span {

color: white;

}

.back-to-top span {

display: block;

}

.page {

width: 100%;

height: 400px;

line-height: 400px;

text-align: center;

}

.page:nth-child(odd) {

background: white;

}

backTop.js 如下：

var backTopVue = new Vue({

el : "#back-to-top",

data : {

//是否显示回到顶部

backTopShow : false,

// 是否允许操作返回顶部

backTopAllow : true,

// 返回顶部所需时间

backSeconds : 100,

// 往下滑动多少显示返回顶部(单位：px)

showPx : 200

},

mounted : function() {

window.addEventListener("scroll", this.backTopShowOperate, true);

},

methods : {

backTopShowOperate : function() {

if (!this.backTopAllow) return;

if (document.body.scrollTop > this.showPx) {

this.backTopShow = true;

} else {

this.backTopShow = false;

}

},

backToTop : function() {

if (!this.backTopAllow) return;

this.backToTopShow = false;

this.backTopAllow = false;

var step = document.body.scrollTop / this.backSeconds;

var backTopInterval = setInterval(function() {

if (document.body.scrollTop > 0) {

document.body.scrollTop -= step;

} else {

backTopVue.backTopAllow = true;

clearInterval(backTopInterval);

}

}, 1);

}

}

});

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