功能描述：
在屏幕的右下角固定一个“返回顶部”按钮，只有当用户滚动屏幕一定程度后出现，否则隐藏。
点击按钮，网页平滑的滚动到页面顶部。
环境：Vue3,js，antd
具体思路：
1、给窗口挂载滚动事件，监听视口的滚动，当滚动距离超出设定阈值后，出现按钮。
2、点击按钮，滚动窗口。
具体代码：
<template>
<div style="height: 100%; overflow-y: auto">
<a-button class="scrollBox" v-show="isShow" @click="goBack">返回顶部</a-button>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const isShow = ref(false) // 控制返回顶部按钮的显隐
// 监听滚动条
const getScrollTop = (e) => {
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
const currentScrollTop = window.scrollY
// 判断距离顶部多少显示回到顶部图标
if (currentScrollTop > clientHeight) {
isShow.value = true
} else {
isShow.value = false
}
}
// 返回顶部
const goBack = () => {
window.scrollTo({ top: 0, behavior: 'smooth' })
}
onMounted(() => {
window.addEventListener('scroll', getScrollTop)
})
</script>
<style scoped>
/* 返回顶部样式 */
.scrollBox {
position: fixed;
right: 10px;
bottom: 20px;
z-index: 99;
}
</style>
一些方法的解释：
-
document.documentElement.clientHeight：- 这是文档的根元素（即
<html>元素）的可视高度。它表示浏览器窗口的视口高度，不包括滚动条的高度。对于大多数现代浏览器，这个值等于视口的高度。
- 这是文档的根元素（即
-
document.body.clientHeight：- 这是文档的
<body>元素的可视高度。它同样表示浏览器窗口的视口高度，不包括滚动条的高度。在绝大多数情况下，这个值应该与document.documentElement.clientHeight相同。
- 这是文档的
-
window.scrollY：- 这是窗口在垂直方向上滚动的距离。它表示从文档顶部到当前视口顶部的滚动距离。如果页面没有滚动，则这个值为 0。如果页面滚动了一段距离，这个值将显示滚动的像素数。