功能描述：
在屏幕的右下角固定一个“返回顶部”按钮，只有当用户滚动屏幕一定程度后出现，否则隐藏。
点击按钮，网页平滑的滚动到页面顶部。
环境：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：