项目需求：要求当前项目每个页面滑到超出一屏的距离时，出现 backTop 按钮，点击则回到最顶端；俗称置顶操作：
因为涉及到的页面较多，每个页面都加肯定显得重复累赘，最终想到了 Vue 的自定义指令 Vue.directive；
场景分析：①.监听页面滚动过程，计算当前的 scrollY 与 设定的 number 值进行对比，从而决定 backTop 按钮的出现隐藏；
②.出现 backTop 按钮时，点击按钮，实现置顶效果（为实现更完美的置顶效果，加了定时器，保证了一定速度的滑行）；
实现过程：为保证作用于全局，我们在 main.js，App.vue 中进行代码的编写：
main.js
// 自定义指令实现back-top; Vue.directive(‘scroll-show‘,{ inserted(el,binding){ let scope = binding.arg || ‘200‘; window.addEventListener(‘scroll‘,function(e){ if(this.scrollY > Number(scope)){ binding.value.value = true; }else{ binding.value.value = false; } }) } }) Vue.directive(‘back-top‘,{ inserted(el,binding){ let e = binding.arg || ‘click‘; el.addEventListener(e,function(){ let scrollToptimer = setInterval(function(){ let top = document.documentElement.scrollTop + document.body.scrollTop; let speed = top/4; top -= speed; document.documentElement.scrollTop = document.body.scrollTop = top; if(top == 0){ clearInterval(scrollToptimer); } },30) }) } })
backTop.vue
<template>
<div class="back-top" v-show=‘isShow.value‘>
<span></span>
</div>
</template>
<script>
export default {
props: [‘isShow‘]
}
</script>
<style scoped>
.back-top{
display: flex;
align-items:center;
}
.back-top > span:nth-child(1) {
display: inline-block;
width: 4rem;
height: 4rem;
background-image: url(./images/backTop.png);
background-repeat: no-repeat;
background-size: contain;
}
.back-top > span:nth-child(2) {
color: #333;
padding-left:0.5rem;
}
.back-top {
position: fixed;
right: 1.5rem;
bottom: 12rem;
}
</style>
App.vue
按照上述代码编写便可以实现全局页面置顶操作；便于后期维护，修改；
原文：https://www.cnblogs.com/rxqlx/p/10419483.html