vue 回到顶部简单动画效果
生活随笔
收集整理的這篇文章主要介紹了
vue 回到顶部简单动画效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
vue 回到頂部動(dòng)畫效果
html
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux上的oracle11g安装(提
- 下一篇: vue 打印 某块内容成pdf