Element Plus 学习宝典

简体中文

English

简体中文

English

主题

Backtop 回到顶部 ​

学习目标 ​

通过本章学习，你将掌握：

  • 基础回到顶部：掌握 Backtop 的基本使用方法和属性配置
  • 触发条件设置：学会控制回到顶部按钮的显示时机
  • 滚动动画配置：实现平滑的滚动回到顶部效果
  • 自定义样式：定制回到顶部按钮的外观和样式
  • 位置控制：精确控制按钮在页面中的位置
  • 事件处理：掌握点击事件和滚动事件的处理
  • 移动端适配：优化移动设备上的交互体验

预计学习时间： 75分钟

概述 ​

Backtop 回到顶部组件提供快速返回页面顶部的功能，当页面滚动到一定高度时自动显示，点击后平滑滚动回到页面顶部。它支持自定义样式、位置调整和目标容器指定，是提升用户浏览体验的重要交互组件。

基础用法 ​

基础回到顶部 ​

通过滑动来查看容器右下角的按钮。

vue
<template>
  <div>
    <!-- 页面内容 -->
    <div style="height: 2000px; padding: 20px;">
      <p>滚动页面查看右下角的回到顶部按钮</p>
      <!-- 更多内容... -->
    </div>
    
    <!-- 回到顶部按钮 -->
    <el-backtop :visibility-height="200" />
  </div>
</template>

自定义内容 ​

显示区域被固定为 40px * 40px 的区域，其中的内容可支持自定义。

vue
<template>
  <div>
    <!-- 页面内容 -->
    <div style="height: 2000px; padding: 20px;">
      <p>滚动页面查看右下角的自定义回到顶部按钮</p>
    </div>
    
    <!-- 自定义回到顶部按钮 -->
    <el-backtop :visibility-height="200" :right="40" :bottom="40">
      <div style="
        height: 100%; 
        width: 100%; 
        background-color: #f2f5f6; 
        box-shadow: 0 0 6px rgba(0,0,0, .12); 
        text-align: center; 
        line-height: 40px; 
        color: #1989fa;
      ">
        UP
      </div>
    </el-backtop>
  </div>
</template>

指定滚动目标 ​

可以指定触发滚动的目标元素。

vue
<template>
  <div>
    <div id="scroll-target" style="height: 400px; overflow: auto; border: 1px solid #ccc;">
      <div style="height: 1000px; padding: 20px;">
        <p>这是一个可滚动的容器</p>
        <p>滚动查看回到顶部按钮</p>
        <!-- 更多内容... -->
      </div>
      
      <el-backtop target="#scroll-target" :visibility-height="100" />
    </div>
  </div>
</template>

自定义位置 ​

通过 right 和 bottom 属性调整按钮位置。

vue
<template>
  <div>
    <div style="height: 2000px; padding: 20px;">
      <p>回到顶部按钮位置已调整</p>
    </div>
    
    <el-backtop 
      :visibility-height="200" 
      :right="100" 
      :bottom="100"
      @click="handleClick"
    >
      <el-icon><CaretTop /></el-icon>
    </el-backtop>
  </div>
</template>

<script setup>
import { CaretTop } from '@element-plus/icons-vue'

const handleClick = () => {
  console.log('回到顶部按钮被点击')
}
</script>

带进度指示的回到顶部 ​

结合滚动进度显示的回到顶部按钮：

vue
<template>
  <div>
    <div class="content" style="height: 2000px; padding: 20px;">
      <h2>长页面内容</h2>
      <p v-for="i in 50" :key="i">这是第 {{ i }} 段内容...</p>
    </div>
    
    <!-- 带进度的回到顶部 -->
    <el-backtop 
      :visibility-height="100" 
      :right="50" 
      :bottom="50"
      @click="handleBackTop"
    >
      <div class="progress-backtop">
        <svg class="progress-ring" width="40" height="40">
          <circle
            class="progress-ring-bg"
            cx="20"
            cy="20"
            r="16"
            fill="transparent"
            stroke="#e4e7ed"
            stroke-width="2"
          />
          <circle
            class="progress-ring-progress"
            cx="20"
            cy="20"
            r="16"
            fill="transparent"
            stroke="#409eff"
            stroke-width="2"
            :stroke-dasharray="circumference"
            :stroke-dashoffset="progressOffset"
          />
        </svg>
        <el-icon class="backtop-icon"><CaretTop /></el-icon>
      </div>
    </el-backtop>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { CaretTop } from '@element-plus/icons-vue'

const scrollProgress = ref(0)
const circumference = 2 * Math.PI * 16
const progressOffset = ref(circumference)

const updateProgress = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
  const progress = (scrollTop / scrollHeight) * 100
  scrollProgress.value = progress
  progressOffset.value = circumference - (progress / 100) * circumference
}

const handleBackTop = () => {
  console.log('回到顶部，当前进度：', scrollProgress.value.toFixed(1) + '%')
}

onMounted(() => {
  window.addEventListener('scroll', updateProgress)
  updateProgress()
})

onUnmounted(() => {
  window.removeEventListener('scroll', updateProgress)
})
</script>

<style scoped>
.progress-backtop {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.progress-ring-progress {
  transition: stroke-dashoffset 0.3s ease;
}

.backtop-icon {
  font-size: 16px;
  color: #409eff;
  z-index: 1;
}
</style>

实际应用示例 ​

博客文章页面 ​

在长文章页面中使用回到顶部：

vue
<template>
  <div class="blog-page">
    <header class="blog-header">
      <h1>技术博客文章标题</h1>
      <div class="article-meta">
        <span>发布时间：2024-01-15</span>
        <span>阅读时间：约 15 分钟</span>
      </div>
    </header>
    
    <article class="blog-content">
      <section v-for="section in articleSections" :key="section.id" class="article-section">
        <h2>{{ section.title }}</h2>
        <p v-for="paragraph in section.content" :key="paragraph">{{ paragraph }}</p>
      </section>
    </article>
    
    <!-- 智能回到顶部按钮 -->
    <el-backtop 
      :visibility-height="300"
      :right="30"
      :bottom="30"
      @click="trackBackTopClick"
    >
      <div class="smart-backtop">
        <el-icon><Top /></el-icon>
        <span class="backtop-text">顶部</span>
      </div>
    </el-backtop>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Top } from '@element-plus/icons-vue'

const articleSections = ref([
  {
    id: 1,
    title: '引言',
    content: ['这是引言部分的内容...', '介绍文章的主要内容...']
  },
  {
    id: 2,
    title: '核心概念',
    content: ['详细解释核心概念...', '提供相关示例...']
  },
  {
    id: 3,
    title: '实践应用',
    content: ['展示实际应用场景...', '分析最佳实践...']
  },
  {
    id: 4,
    title: '总结',
    content: ['总结文章要点...', '提供进一步学习建议...']
  }
])

const trackBackTopClick = () => {
  // 统计用户行为
  console.log('用户点击了回到顶部按钮')
  // 可以发送统计数据到分析服务
}
</script>

<style scoped>
.blog-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  line-height: 1.6;
}

.blog-header {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e4e7ed;
}

.article-meta {
  margin-top: 10px;
  color: #909399;
  font-size: 14px;
}

.article-meta span {
  margin-right: 20px;
}

.article-section {
  margin-bottom: 40px;
}

.article-section h2 {
  color: #303133;
  margin-bottom: 20px;
}

.article-section p {
  margin-bottom: 15px;
  color: #606266;
}

.smart-backtop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #409eff, #67c23a);
  border-radius: 25px;
  color: white;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.smart-backtop:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
}

.backtop-text {
  font-size: 10px;
  margin-top: 2px;
}
</style>

数据列表页面 ​

在长列表页面中使用回到顶部：

vue
<template>
  <div class="data-list-page">
    <div class="list-header">
      <h2>数据列表 ({{ dataList.length }} 条记录)</h2>
      <div class="list-controls">
        <el-button @click="loadMore">加载更多</el-button>
        <el-button @click="scrollToTop">回到顶部</el-button>
      </div>
    </div>
    
    <div class="data-list">
      <div 
        v-for="item in dataList" 
        :key="item.id" 
        class="list-item"
      >
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
        <div class="item-meta">
          <span>ID: {{ item.id }}</span>
          <span>创建时间: {{ item.createTime }}</span>
        </div>
      </div>
    </div>
    
    <!-- 列表专用回到顶部 -->
    <el-backtop 
      :visibility-height="200"
      :right="40"
      :bottom="80"
      @click="handleListBackTop"
    >
      <div class="list-backtop">
        <el-icon><ArrowUp /></el-icon>
        <div class="item-count">{{ visibleItemCount }}</div>
      </div>
    </el-backtop>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ArrowUp } from '@element-plus/icons-vue'

const dataList = ref([])
const visibleItemCount = ref(0)

// 生成模拟数据
const generateData = (count) => {
  const data = []
  for (let i = 1; i <= count; i++) {
    data.push({
      id: i,
      title: `数据项 ${i}`,
      description: `这是第 ${i} 个数据项的描述信息...`,
      createTime: new Date(Date.now() - Math.random() * 10000000000).toLocaleDateString()
    })
  }
  return data
}

const loadMore = () => {
  const newData = generateData(20)
  dataList.value.push(...newData)
}

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

const updateVisibleCount = () => {
  const scrollTop = window.pageYOffset
  const itemHeight = 120 // 估算每个列表项的高度
  visibleItemCount.value = Math.floor(scrollTop / itemHeight)
}

const handleListBackTop = () => {
  console.log(`从第 ${visibleItemCount.value} 项回到顶部`)
}

onMounted(() => {
  dataList.value = generateData(50)
  window.addEventListener('scroll', updateVisibleCount)
})

onUnmounted(() => {
  window.removeEventListener('scroll', updateVisibleCount)
})
</script>

<style scoped>
.data-list-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.list-controls {
  display: flex;
  gap: 10px;
}

.list-item {
  padding: 20px;
  margin-bottom: 15px;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.list-item h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.list-item p {
  margin: 0 0 10px 0;
  color: #606266;
  line-height: 1.5;
}

.item-meta {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: #909399;
}

.list-backtop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #f56c6c;
  border-radius: 50%;
  color: white;
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
}

.item-count {
  font-size: 10px;
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 4px;
  border-radius: 8px;
}
</style>

API ​

Attributes ​

名称说明类型默认值
target触发滚动的对象string—
visibility-height滚动高度达到此参数值才出现number200
right控制其显示位置，距离页面右边距number40
bottom控制其显示位置，距离页面底部距离number40

Events ​

名称说明回调参数
click点击按钮触发的事件Function

Slots ​

插槽名说明
default自定义默认内容

最佳实践 ​

1. 合理设置显示高度 ​

vue
<template>
  <!-- 短页面：较低的触发高度 -->
  <el-backtop :visibility-height="150" v-if="isShortPage" />
  
  <!-- 长页面：较高的触发高度 -->
  <el-backtop :visibility-height="400" v-else />
</template>

<script setup>
import { ref, onMounted } from 'vue'

const isShortPage = ref(false)

onMounted(() => {
  // 根据页面高度动态调整
  const pageHeight = document.documentElement.scrollHeight
  isShortPage.value = pageHeight < 2000
})
</script>

2. 位置优化和响应式设计 ​

vue
<template>
  <el-backtop 
    :right="isMobile ? 20 : 40"
    :bottom="isMobile ? 80 : 40"
    :visibility-height="isMobile ? 100 : 200"
  >
    <div :class="['responsive-backtop', { 'mobile': isMobile }]">
      <el-icon><CaretTop /></el-icon>
    </div>
  </el-backtop>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { CaretTop } from '@element-plus/icons-vue'

const isMobile = ref(false)

const checkDevice = () => {
  isMobile.value = window.innerWidth < 768
}

onMounted(() => {
  checkDevice()
  window.addEventListener('resize', checkDevice)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkDevice)
})
</script>

<style scoped>
.responsive-backtop {
  width: 40px;
  height: 40px;
  background: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
}

.responsive-backtop.mobile {
  width: 50px;
  height: 50px;
  background: #67c23a;
}

.responsive-backtop:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}
</style>

3. 性能优化 ​

vue
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 防抖优化滚动监听
let scrollTimer = null
const isScrolling = ref(false)

const handleScroll = () => {
  isScrolling.value = true
  
  clearTimeout(scrollTimer)
  scrollTimer = setTimeout(() => {
    isScrolling.value = false
  }, 150)
}

// 节流优化
let lastScrollTime = 0
const throttledScroll = () => {
  const now = Date.now()
  if (now - lastScrollTime > 100) {
    handleScroll()
    lastScrollTime = now
  }
}

onMounted(() => {
  window.addEventListener('scroll', throttledScroll, { passive: true })
})

onUnmounted(() => {
  window.removeEventListener('scroll', throttledScroll)
  clearTimeout(scrollTimer)
})
</script>

4. 多容器管理 ​

vue
<template>
  <div class="multi-container-demo">
    <!-- 主内容区域 -->
    <div class="main-content" style="height: 1000px;">
      <h2>主内容区域</h2>
      <el-backtop :visibility-height="200" :right="40" :bottom="40" />
    </div>
    
    <!-- 侧边栏滚动区域 -->
    <div class="sidebar" id="sidebar">
      <div style="height: 800px; padding: 20px;">
        <h3>侧边栏内容</h3>
        <p v-for="i in 30" :key="i">侧边栏项目 {{ i }}</p>
      </div>
      
      <el-backtop 
        target="#sidebar"
        :visibility-height="100"
        :right="10"
        :bottom="10"
      >
        <div class="sidebar-backtop">
          <el-icon><Top /></el-icon>
        </div>
      </el-backtop>
    </div>
  </div>
</template>

<style scoped>
.multi-container-demo {
  display: flex;
  gap: 20px;
}

.main-content {
  flex: 1;
  background: #f5f7fa;
  padding: 20px;
}

.sidebar {
  width: 300px;
  height: 400px;
  overflow-y: auto;
  background: white;
  border: 1px solid #e4e7ed;
  position: relative;
}

.sidebar-backtop {
  width: 30px;
  height: 30px;
  background: #e6a23c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}
</style>

常见问题 ​

Q: 回到顶部按钮不显示？ ​

A: 检查页面或目标容器的滚动高度是否达到 visibility-height 设置的值，确保有足够的滚动距离。

Q: 如何在特定容器中使用回到顶部？ ​

A: 设置 target 属性指向滚动容器的选择器，确保容器有 overflow: auto 或 overflow: scroll 属性。

Q: 自定义内容超出了 40px 限制怎么办？ ​

A: 组件的显示区域固定为 40px * 40px，建议在此尺寸内设计自定义内容，或使用 CSS 进行适当调整。

Q: 如何添加滚动动画效果？ ​

A: 可以通过 CSS 的 scroll-behavior: smooth 属性或监听 click 事件实现自定义滚动动画。

实践项目 ​

页面滚动优化系统 ​

创建一个完整的页面滚动优化系统，包含以下功能：

  1. 智能回到顶部

    • 实现多种触发条件的回到顶部
    • 支持不同页面区域的回到顶部
    • 处理长页面的分段回到顶部
    • 管理多个滚动容器的回到顶部

  2. 滚动进度指示

    • 实现页面滚动进度条
    • 支持阅读进度的可视化
    • 处理滚动位置的实时反馈
    • 管理滚动状态的持久化

  3. 滚动导航系统

    • 创建浮动导航菜单
    • 实现快速定位功能
    • 支持章节间的快速跳转
    • 处理滚动锚点的管理

  4. 用户体验优化

    • 实现平滑滚动动画
    • 支持键盘快捷键操作
    • 处理移动端的滚动优化
    • 管理滚动性能的监控

实践要点 ​

  • 合理设置回到顶部的触发高度
  • 实现平滑的滚动动画效果
  • 优化按钮的位置和样式
  • 确保移动端的良好体验
  • 处理不同滚动容器的适配

学习检查清单 ​

基础功能 ​

  • [ ] 掌握 Backtop 的基本使用方法
  • [ ] 理解 visibility-height 属性的作用
  • [ ] 熟练使用 right 和 bottom 位置属性
  • [ ] 掌握 target 属性指定滚动容器

高级功能 ​

  • [ ] 实现自定义回到顶部按钮样式
  • [ ] 处理多个滚动容器的回到顶部
  • [ ] 掌握滚动事件的监听和处理
  • [ ] 实现滚动进度的可视化

性能优化 ​

  • [ ] 理解滚动事件的性能影响
  • [ ] 优化滚动监听的频率
  • [ ] 合理使用防抖和节流
  • [ ] 处理大量滚动数据的性能

用户体验 ​

  • [ ] 实现平滑的滚动动画
  • [ ] 处理键盘导航支持
  • [ ] 提供清晰的视觉反馈
  • [ ] 确保移动端的良好体验

注意事项 ​

滚动性能的优化 ​

  • 避免频繁的滚动事件监听
  • 使用防抖和节流优化性能
  • 合理设置滚动监听的频率
  • 及时清理不需要的滚动监听器

用户操作的连续性 ​

  • 保持滚动操作的流畅性
  • 提供合适的滚动反馈
  • 避免滚动过程中的卡顿
  • 确保滚动动画的自然性

移动端的交互体验 ​

  • 在小屏幕设备上优化按钮大小
  • 考虑手指操作的便利性
  • 提供合适的触摸反馈
  • 优化移动端的滚动性能

页面布局的影响 ​

  • 确保按钮不会遮挡重要内容
  • 考虑不同屏幕尺寸的适配
  • 处理固定定位元素的层级
  • 管理页面滚动的整体体验

总结 ​

Backtop 回到顶部组件是提升用户浏览体验的重要工具，支持：

  • 智能显示控制：基于滚动高度自动显示/隐藏
  • 灵活的位置配置：支持自定义按钮位置
  • 多容器支持：可指定特定滚动容器
  • 完全自定义样式：通过插槽实现个性化设计
  • 良好的性能表现：优化的滚动监听机制
  • 响应式适配：适应不同设备和屏幕尺寸

掌握 Backtop 组件的使用，能够为用户提供便捷的页面导航体验，特别适用于长页面、文档站点和数据列表等场景。

参考资料 ​

学习记录 ​

学习日期： ___________
完成状态： ___________
学习笔记：

遇到的问题：

解决方案：

实践项目完成情况：

  • [ ] 页面滚动优化系统
  • [ ] 智能回到顶部功能
  • [ ] 滚动进度指示器
  • [ ] 滚动导航系统
  • [ ] 用户体验优化

Element Plus Study Guide

Copyright © 2025 edlo.cn - Element Plus Study Guide