关于elementui中的Backtop 回到顶部的使用方法

最新推荐文章于 2025-09-24 12:05:26 发布

原创最新推荐文章于 2025-09-24 12:05:26 发布 · 2.4k 阅读

CC 4.0 BY-SA版权

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

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;
  }

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