Vue3-如何自己写一个“返回顶部”功能

news2024/12/26 22:04:09

功能描述：

在屏幕的右下角固定一个“返回顶部”按钮，只有当用户滚动屏幕一定程度后出现，否则隐藏。

点击按钮，网页平滑的滚动到页面顶部。

环境：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。如果页面滚动了一段距离，这个值将显示滚动的像素数。