开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天、第 14 篇，点击查看活动详情
前言
所谓固钉，就是页面向下滚动时，可以将元素固定在可视区域内，所谓回到顶部顾名思义就是一个回到顶部的按钮，效果可以参考elementui中Affix 固钉组件和Backtop 回到顶部，但是想成为一名优秀的前端工程师，会用必然是不够的，我们还要学会怎么实现。
固钉
首先当然是需要有一个元素,因为vue中可以通过v-bind指令绑定class灵活的改变元素样式，因此也方便我们实现
<div class="minor-header" :class="{ sticky_element: isVisible }" ref="target">
</div>
之后要做到一开始元素就更正常元素一样渲染在dom流中，因此isVisiable变量初始值为false，然后通过监听scrol事件判断它是否已经滚动到视口以外，滚动到视口以外之后另isVisiable变为true，也就是给元素加上sticky_element样式，代码实现如下
import { ref, onMounted, onUnmounted, computed } from "vue";
let target = ref(null);
let isVisible = ref(false);
onMounted(() => {
window.addEventListener("scroll", fiexdNav);//添加滚动监听
});
let navOffsetTop = computed(() => {
return target.value.offsetTop;//获取目标组件距离顶部的距离
});
function fiexdNav() {
// 获取当前页面的滚动高度
const scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
// 如果滚动高度大于等于目标元素的offsetTop将isVisible改为true，也就是添加样式，否则改为false
//console.log(navOffsetTop.value);
if (scrollTop > navOffsetTop.value) {
isVisible.value = true;
} else {
isVisible.value = false;
}
}
onUnmounted(() => {
window.removeEventListener("scroll", fiexdNav);//组件销毁时移除监听
});
滚动式返回顶部
常规的给a标签加上类似href=“#top”的属性，直接将窗口滚动高度置零的方法可以很容易地实现页面回到顶部，不过它们都不存在动画效果，直接将页面跳转到顶部，可能并不是我们想要的。像elementui的Backtop组件就可以实现很丝滑的动画效果，接下来我们尝试一下自己实现动画效果。
这篇文章的想法呢是按钮按下以后通过主次减小窗口滚动高度来实现动画效果，首先准备组件
<template>
<button class="to-top iconfont" ref="target" :class="{'visible':isVisible}" @click="goTop">

</button>
</template>
首先利用刚刚固钉的技巧使我们这个组件在窗口滚动一定高度以后出现
之后时按下出发的事件
function goTop(){
// console.log(document.body)
let top = document.documentElement.scrollTop;//获取按钮被按下时距离父元素（上一个position不为默认值的父元素）的高度
//通过setIntervalAPI循环触发减小滚动高度
const timeTop=setInterval(() => {
document.documentElement.scrollTop =top/=1.1;
if (top <= 30) {
clearInterval(timeTop); //清除定时器
}
}, 10);
}
这样就可以实现简单的回到顶部的动画效果，而且因为我们选择的是获取相对于父元素的高度，因此可以更灵活的选择要回到那个位置，我们还能发现我这里通过一个简单的除法可以让动画有渐慢的效果，当然这样实现的效果比较简陋，我在查阅资料的过程中还发现了用于制作动画的 animate API，可以实现更加优美的效果。 最后再打个广告，关注公众号程序猿青空，不定期分享各种优秀文章、学习资源、学习课程，能在未来（因为现在还没啥东西）享受更多福利。
