需求： 在很多商城网站或者一些其他的网站我们都可以看到，当用户在页面中向下滚动到一定位置时，就会出现一个返回顶部按钮，这样做的目的就是便于用户操作
思路： 这里的做法其实很简单，就是监听用户在页面中的滚动，判断滚动距离是否大于我们设置的，若大于则显示“返回顶部”按钮，反之不显示
说明：
window.pageYOffset：返回文档在垂直方向上滚动的像素数。如果文档没有垂直滚动，或者没有滚动事件发生，它将返回 0。document.documentElement.scrollTop：返回 HTML 元素（即根元素）在垂直方向上滚动的像素数。通常情况下，它与window.pageYOffset的值相同。但是在某些情况下，例如在一些旧版本的浏览器中，可能会出现不一致的情况。document.body.scrollTop：返回body元素在垂直方向上滚动的像素数。类似于document.documentElement.scrollTop，它在大多数情况下与window.pageYOffset的值相同。但在一些特殊情况下，如在某些移动设备上，body元素才是实际滚动的元素
在不同的浏览器和设备上，获取滚动位置的方法可能有所差异。因此，为了兼容性和准确性，我们可以使用这些方法来获取滚动位置
代码： components/backTop.vue
<template>
<div>
<button @click="scrollToTop" v-show="showButton">返回顶部</button>
</div>
</template>
<script>
export default {
data() {
return {
showButton: false, // 控制是否显示返回顶部按钮
};
},
mounted() {
// 监听页面滚动事件
window.addEventListener("scroll", this.handleScroll);
},
beforeDestroy() {
// 组件销毁前移除事件监听
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
handleScroll() {
const scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
// 判断滚动距离，控制是否显示返回顶部按钮
this.showButton = scrollTop > 300;
},
scrollToTop() {
// 返回顶部
window.scrollTo({ top: 0, behavior: "smooth" });
},
},
};
</script>
<style scoped>
button {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 40px;
border: none;
background-color: #ccc;
cursor: pointer;
}
</style>
父组件：home.vue
<template>
<div style="height: 2000px">
<BackTop></BackTop>
</div>
</template>
<script>
import BackTop from "@/components/backTop.vue";
export default {
components: {
BackTop,
},
};
</script>
初识状态：
当向下滚动距离大于300px时：
