Element 组件 | el-backtop 组件实现回到底部

示例采用 Scrollbar + Backtop 组件实现，模拟异步获取数据后，根据滚动容器高度及滚动位置判断是否展示回到底部按钮。

平滑滚动到底部

const container = document.querySelector('.scrollWrap')
container && container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })

完整代码

<script setup lang="ts">
import { CaretBottom } from '@element-plus/icons-vue'

let showBackBottom = ref<Boolean>(false)

/**
 * 判断是否显示回到底部按钮
 */
const handleShowBackBottom = () => {
  const container = document.querySelector('.scrollWrap') as HTMLElement
  const maxScrollTop = container.scrollHeight - container.offsetHeight
  const isBottom = container.scrollTop >= maxScrollTop
  showBackBottom.value = container ? !isBottom : false
}

let list = ref<number[]>([])

/**
 * 异步获取列表数据
 */
const getList = () =>
  new Promise<number[]>((resolve) => {
    setTimeout(() => {
      resolve(Array.from({ length: 300 }, (_, index) => index + 1))
    }, 2000)
  })

onMounted(async () => {
  list.value = await getList()

  // 视图更新后, 判断滚动条位置是否达到底部
  nextTick(() => {
    handleShowBackBottom()
  })
})

/**
 * 回到底部
 */
const scrollBottom = () => {
  const container = document.querySelector('.scrollWrap')
  container && container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
}
</script>

<template>
  <div class="h-full relative">
    <el-scrollbar wrap-class="scrollWrap" @scroll="handleShowBackBottom">
      <div v-for="i in list" :key="i" v-text="i"></div>
    </el-scrollbar>
    <el-backtop target=".scrollWrap" :right="0" :bottom="0"></el-backtop>
    <el-backtop
      v-if="showBackBottom"
      class="el-backtop-bottom"
      target=".scrollWrap"
      :visibility-height="0"
      :right="0"
      :bottom="0"
      @click="scrollBottom"
    >
      <el-icon><CaretBottom /></el-icon>
    </el-backtop>
  </div>
</template>

<style scoped>
.el-backtop {
  position: absolute;
  left: 100% !important;
  bottom: 50% !important;
  transform: translate(50%, calc(-50% - 10px));
}

.el-backtop-bottom {
  transform: translate(50%, calc(50% + 10px));
}
</style>