点击回到顶部

 默认不显示回到顶部的按钮，当滚动条滚到大于100像素的时候，回到顶部的按钮显示，点击顶部按钮回到顶部，然后回到顶部的按钮消失。

    

1、 先在项目里面引入iconfont图标，我使用iconfont Unicode编码线上字体图标，创建一个

iconfont.css文件，把下面的代码复值到iconfont.css文件保存。

@font-face {

    font-family: 'iconfont';  /* Project id 2737254 */

    src: url('//at.alicdn.com/t/font_2737254_1zdflbjtvny.woff2?t=1628660156120') format('woff2'),

         url('//at.alicdn.com/t/font_2737254_1zdflbjtvny.woff?t=1628660156120') format('woff'),

         url('//at.alicdn.com/t/font_2737254_1zdflbjtvny.ttf?t=1628660156120') format('truetype');

  }

2、在哪使用就在哪引入，我是在app.vue里使用，app.vue组件style部分引入@import "./assets/css/iconfont.css";

3、结构部分

<template>

    <div class="footer">

      <div class="iconfont" v-show="gotop" @click="toTop">&#xe7ed;</div>

    </div>

</template>

4、js部分

export default {

  data() {

    return {

      gotop: false

    };

  },

  mounted() {　　// 此处true需要加上，不加滚动事件可能绑定不成功

    window.addEventListener("scroll", this.handleScroll, true);

  },

  methods: {

    handleScroll() {

       let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;

      scrolltop > 100 ? (this.gotop = true) : (this.gotop = false);

    },

    toTop() { 

      let top = document.documentElement.scrollTop || document.body.scrollTop;

      // 实现滚动效果 

      const timeTop = setInterval(() => {

        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;

        if (top <= 0) {

          clearInterval(timeTop);

        }

      }, 10);

    }

  }

}

5、css部分

@import "./assets/css/iconfont.css";

.footer {

  height: 2000px

}

.iconfont {

  display: inline-block;

  font-family: "iconfont" !important;

  font-size: 16px;

  font-style: normal;

  color: #55aaf8;

  text-align: center;

  line-height: 30px;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  box-shadow: 0px 0px 10px #f6f6f6;

  text-align: center;

  position: fixed;

  right: 50px;

  bottom: 30px;

  cursor: pointer;

  background: white;

}