思路剖析
回到顶部成果，思路其实很简略。就是初始有一个盒子，固定定位在浏览器网页的右下角，一开始要暗藏起来。当滚动超过首屏高度的地位时，才让其呈现。给这个小盒子绑定一个点击事件，在点击事件的回调中，应用定时器去让滚动条的高度递加，从而实现回到顶部成果。当然也要绑定滚动事件，监听滚动的高度，即监听滚动条的纵坐标的地位。因为须要拿滚动条滚动的高度和首屏的高度做比拟。
话不所说，先看一下最终效果图：
请依照正文来哦
代码附上
<template> <div id="app"> <p v-for="(item, index) in arr" :key="index">回到顶部</p> <div class="back" v-show="showGoTop" @click="goToTop">back</div> </div></template><script>export default { data() { return { arr: [], showGoTop: false, }; }, mounted() { for (let index = 0; index < 54; index++) { this.arr.push(index); } // 第一步，绑定一个滚动事件，当滚动的间隔达到浏览器窗口的外部高度的时候(大略一个屏幕的高度吧) // 就让回到顶部的小盒子显示进去 window.addEventListener("scroll", this.handleScroll,true); // 这里加上true是为了保障浏览器滚动的及时性 }, methods: { // 滚动事件的回调函数 handleScroll() { let scrolltop = document.documentElement.scrollTop; // 获取以后页面的滚动条纵坐标地位 console.log("看看滚动了多高的间隔",scrolltop); if(scrolltop > window.innerHeight){ // 浏览器窗口的外部高度 window.innerHeight this.showGoTop = true // 超过就显示进去 }else{ this.showGoTop = false // 不超过还藏起来 } }, // 第二步，当用户点击回到顶部小盒子的时候，依然获取所在的页面的滚动条纵坐标地位, // 应用定时器让页面滚动条的坐标地位递加，这样就能实现平滑过渡的成果 goToTop() { let scrolltop = document.documentElement.scrollTop; // 获取以后页面的滚动条纵坐标地位 // 定时器平滑滚动 const time = setInterval(() => { document.documentElement.scrollTop = scrolltop -= 40; if (scrolltop <= 0) { // 定时器要及时革除掉，要不然始终执行很恐怖的 clearInterval(time); } }, 10); }, },};</script><style lang="less" scoped>p { margin-bottom: 30px;}.back { width: 60px; height: 60px; line-height: 60px; text-align: center; background-color: #abf; position: fixed; right: 100px; bottom: 100px; cursor: pointer;}</style>总结
好忘性不如烂笔头，记录一下