vue 回到頂部動(dòng)畫效果
html

<template> <div id="toTop" @click="toTop"></div > </template>

js

<script>let timer = null //定義初始值export default {props:{step:{ //此數(shù)據(jù)是控制動(dòng)畫快慢的type:Number,default:100}},data(){return{}},methods:{toTop(){ // 動(dòng)畫timer = setInterval(function () {let osTop = document.documentElement.scrollTop || document.body.scrollToplet ispeed = Math.floor(-osTop / 5)document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeedthis.isTop = trueif (osTop === 0) {clearInterval(timer)}},30)},},created(){let vm =this;window.onscroll=function(){if (document.documentElement.scrollTop>60) {vm.isActive=true;}else {vm.isActive=false;}}}} </script>

總結(jié)

以上是生活随笔為你收集整理的vue 回到顶部简单动画效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。