vue返回顶部

最新推荐文章于 2024-09-26 17:07:55 发布

困在雨天

最新推荐文章于 2024-09-26 17:07:55 发布

阅读量180

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44106237/article/details/127373014

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<template>
  <div>
    <img id='orange' v-show='flag' src="../assets/橙子.png" @click="returnTop">
  </div>
</template>

<script>
export default {
name: "minOrange",
  data(){
  return{
    flag:false,
    timer1:null,
    timer2:null,
    n:0,
    scrollTop:0,
    returnTopGlg:true,
  }
  },
  mounted () {
    window.addEventListener('scroll', this.getScroll)
  },
  destroyed() {
    clearInterval(this.timer1)
    clearInterval(this.timer2)
    window.removeEventListener('scroll', this.getScroll)
  },
  methods:{
    getScroll () {
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      clearInterval(this.timer1)
      if(this.scrollTop >= 300){
        this.flag = true
        this.timer1 = setInterval(()=>{
          this.n+=3
          document.getElementById('orange').style.setProperty('transform','rotate('+this.n+'deg)')
        },10)
      }
      if(this.scrollTop == 0 || this.scrollTop < 300){
        this.flag = false
      }
    },
    returnTop(){
      if(this.returnTopGlg){
        this.returnTopGlg=false
        this.timer2 = setInterval(()=>{
          document.documentElement.scrollTop -= 20
          if(document.documentElement.scrollTop <= 50){
            clearInterval(this.timer1)
            clearInterval(this.timer2)
            this.flag = false
            this.returnTopGlg=true
          }
        },1)
      }
    }
  }
}
</script>

<style scoped lang="less">
#orange {
  position: fixed;
  bottom: 150px;
  right:10px;
  width: 50px;
  height: 50px;
  z-index: 100;
}
</style>