Vue3-如何自己写一个“返回顶部”功能
大嘴史努比 2024-10-05 15:33:01 阅读 70
功能描述：
在屏幕的右下角固定一个“返回顶部”按钮，只有当用户滚动屏幕一定程度后出现，否则隐藏。
点击按钮，网页平滑的滚动到页面顶部。
环境：Vue3,js，antd
具体思路：
1、给窗口挂载滚动事件，监听视口的滚动，当滚动距离超出设定阈值后，出现按钮。
2、点击按钮，滚动窗口。
具体代码：
<code><template>
<div style="height: 100%; overflow-y: auto">code>
<a-button class="scrollBox" v-show="isShow" @click="goBack">返回顶部</a-button>code>
</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。如果页面滚动了一段距离，这个值将显示滚动的像素数。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。