关于elementui中的Backtop 回到顶部的使用方法_element ui回到顶部-优快云博客

本文链接：https://blog.youkuaiyun.com/VVVVVVV______/article/details/104544517

本文详细介绍了如何在ElementUI中使用Backtop组件实现回到顶部功能。通过将Backtop组件的目标设置为整个页面的div类名，可以实现在滚动到页面底部时显示回到顶部按钮。同时，文章提供了具体的代码示例和CSS样式设置，帮助读者快速掌握并应用到自己的项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementui中的Backtop 回到顶部的使用方法
首先，将elementui中的代码粘到body中，将代码中的target换成整个大div的类名

<div class="wraper">
  <template>
    Scroll down to see the bottom-right button.
    <el-backtop target=".wraper">
      <div class="back-ball">
        回到顶部
      </div>
    </el-backtop>
  </template>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
</div>

需要注意的是这里的类whole的css代码，需要这样写

.whole{
    height:90vh ;/*height可以根据你要创建的页面进行修改*/
    width: 100vw;
    overflow-x: hidden;
    overflow-y: scroll;
  }

就可以实现回到顶部这一动作了。