vue 实现滚动到顶部

前言

在网站中滚动到顶部的功能是都需要的，不然你数据多，划到了最底下，你还得滚动鼠标划上去，要是我就当场吐血，所以各大网站就都会加一个滚动到顶部的按钮直接一键滚动。那么如何在网站中简单粗暴实现一个滚动到顶部的功能。请看代码

创建按钮

  <a href="javascript:void(0)" title="回到顶部" class="toolbar_item back2top" @click="backTop()" v-if="showBtn">
            <el-tooltip class="item" effect="dark" content="回到顶部" placement="left">
                <svg-icon icon-class="topBar"></svg-icon>
            </el-tooltip>
   </a>

定义参数

 data() {
        return {
            showBtn: false, // 回到顶部，默认是false，就是隐藏起来
        }
  },

监听滚动事件

 mounted() {
        window.addEventListener("scroll", this.toTop, true);
    },

定义监听方法

  toTop() {
            let scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            this.showBtn = scrollTop > 200
        },

上面的>200代表窗口超过body页面的200像素时显示回到顶部按钮

var clientHeight = document.documentElement.clientHeight;  
var scrollHeight = document.documentElement.scrollHeight;  

var scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;  
  
console.log(scrollPercent + "%");
var roundNum = Math.round(scrollPercent);  // 四舍五入取整

这里的代码可以实现显示滚动到页面的百分比数值。按需添加

定义滚动到顶部的方法

 backTop() {
            var timer = setInterval(function () {
                let osTop =
                    document.documentElement.scrollTop || document.body.scrollTop;
                let ispeed = Math.floor(-osTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop =
                    osTop + ispeed;
                this.isTop = true;
                if (osTop === 0) {
                    clearInterval(timer);
                }
            }, 30);
        },

上面的30代表持续多久回到顶部，数值越大则回到顶部的时间越慢。