返回顶部组件

最新推荐文章于 2024-05-18 14:53:16 发布

。。媛。。

最新推荐文章于 2024-05-18 14:53:16 发布

阅读量121

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/caoyuan258/article/details/110870785

版权

vue 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<template>
  <div>
    <h3>我是首页</h3>
    <div>
      <p>fdf</p>
      <p>dfdf</p>
      <p>dd</p>
      <p>fdf</p>
      <p>dd</p>
      <p>df</p>
      <p>df</p>
      <p>df</p>
      <p>fd</p>
      <p>dfd</p>
    </div>
    <backTop></backTop>
  </div>
</template>

<script>
import backTop from "../components/backTop";
export default {
  data() {
    return {};
  },
  components: {
    backTop
  }
};
</script>
<style scoped>
p{
  height: 300px;
}
</style>

backTOP组件

<template>
<div id='goTop'>
    <div class="goTop" v-show="goTopShow" @click="goTop"><i class="goTopIcon"></i></div>
</div>
</template>

<script>
export default {
  name: 'goTop',
  components: {},
  props: {},
  data () {
    return {
        scrollTop:'',
        goTopShow:false
    }
  },
  mounted () {
     window.addEventListener('scroll', this.handleScroll)
   },
    destroyed() {
    window.removeEventListener("scroll", this.showBackTop, true);
  },
  methods: {
     handleScroll () {
          this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          if(this.scrollTop>500){
            this.goTopShow=true
          }
        },
     goTop(){
          let timer=null,_that=this;
          cancelAnimationFrame(timer)
          timer=requestAnimationFrame(function fn(){
            if(_that.scrollTop>0){
              _that.scrollTop-=50;
              document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
              timer=requestAnimationFrame(fn)
            }else {
              cancelAnimationFrame(timer);
              _that.goTopShow=false;
            }
          })
        }

  }
}
</script>
<style scoped>
 .goTop{
    position: fixed;
    right: 20px;
    bottom: 50px;
    width: 50px;
    height: 50px;
    background:rgba(0,0,0,0.65);
  }
  .goTop:hover{
    background:rgba(0,0,0,.85);
  }
  .goTopIcon{
    margin-left: 10px;
    display: block;
    width: 30px;
    height: 30px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABaUlEQVRYR+2W7U3DQBBE31QAJaQDUkJSAXQA6QAqACqADggVBCoAKoAOCBWEDgatZEcHyeX8AYqQvD/P59t3s7tjiz2H9pyfAWBQ4H8rYPtQ0mefSeqlgO0HYCVp1hWiM4DtOXACHADzrhCdAGxfAZdAffM74ELSbVslWgPYPgMi4UxSqMC2taYgrQCSRNeSQoV1VCU5BaaSnn8dwPYYeAIeJYUKG1FBHFcQb00gGimQJH+RFI2XDdtx+6OmEEWAmHXgHfgAJqW5r/YHhCuInT6xE6A6LGSPfcXktSzVe1GCVQmiBBCHjICxpGWTmiYQ0TOhxKukae7dLEBiNHHzRg31M0nVOwGxyBnVVoCuI5WZjGjaRc4tNwBsnwM3qdG0kT4DsWFe9b5vAH0crQSZu9gawHYt1X3OaEpJSs+3lTYFiGZZ/lXyZDri+zGSNIm1FKD3z0VJgdQnakMrOmHTQ7vuGwAGBQYFvgCufKAhUkYyWwAAAABJRU5ErkJggg==");
    background-position: center center;
  }

</style>