第vue項(xiàng)目tween方法實(shí)現(xiàn)返回頂部的示例代碼當(dāng)你要實(shí)現(xiàn)一個(gè)返回頂部的功能時(shí)候你會(huì)怎么做，大部分人會(huì)使用document.body.scrollTop=0；這么寫(xiě)就實(shí)現(xiàn)了功能，

不過(guò)要更加的細(xì)膩一點(diǎn)我們不妨用tween的緩動(dòng)來(lái)實(shí)現(xiàn)，看看效果如何吧。

之前我們寫(xiě)過(guò)tween的相關(guān)文章，這里不做介紹了。

二、代碼

!DOCTYPEhtml

html

head

metacharset="UTF-8"

title/title

scriptsrc="/npm/vue"/script

styletype="text/css"

#app{width:100%;height:3000px;background:#CCCCCC;}

.backTop{

width:1.5rem;

height:1.5rem;

border:1pxsolid#ff0000;

position:fixed;

right:1rem;

bottom:2rem;

border-radius:50%;

/*background:url(/static/imgs/backtop20250226.png)no-repeat40%;*/

background-size:70%100%;

/style

/head

body

divid="app"

div@click="backTop()"Top/div

/div

scripttype="text/javascript"

varapp=newVue({

el:"#app",

data:{

methods:{

backTop(){

//*t:currenttime（當(dāng)前時(shí)間）；

//*b:beginningvalue（初始值）；

//*c:changeinvalue（變化量）；

//*d:duration（持續(xù)時(shí)間）。

varTween={

Linear:function(t,b,c,d){//勻速運(yùn)動(dòng)，想要實(shí)現(xiàn)其他的效果可以使用tween的其他方法

returnc*t/d+b;

Math.tween=Tween;

vart=1;

constb=document.documentElement.scrollTop;

constc=50;

constd=5;

constsetInt=setInterval(()={

t--;

console.log(t)

if(document.documentElement.scrollTop==0){clearInterval(setInt)}

console.log(t);

constbackTop=Tween.Linear(t,b,c,d);

console.log(backTop);

document.documentElement.scrollTop=backTop;

},20)

/script

/body

/html

三、requestAnimationFrame改寫(xiě)setInterval方法：

methods:{

backTop(){

varTween={

Linear:function(t,b,c,d){//勻速

returnc*t/d+b;

Math.tween=Tween;

vart=1;

constb=document.body.scrollTop;

constc=1;

constd=1;

vartimer;

timer=requestAnimationFrame(functionfn(){

if(document.body.scrollTop0){

t--;

console.log(t)

console.log(t);

constbackTop=Tween.Linear(t,b,c,d);

console.log(backTop);

document.body.scrollTop=backTop;

timer=req