为什么element的el-backtop会不管用，来看这里

原创已于 2022-04-22 10:22:33 修改 · 置顶 · 6.2k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2020-05-23 16:55:22 首次发布

前端同时被 3 个专栏收录

34 篇文章

订阅专栏

vue

28 篇文章

订阅专栏

组件

6 篇文章

订阅专栏

本文详细介绍了Element UI中回到顶部组件的正确使用方法，包括如何设置目标元素、解决滚动条问题以及样式调整技巧，确保组件在各种布局下都能正常工作。

<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

把target指向你要产生“回到顶部”按钮的组件，
这个组件一定要是产生滚动条的组件！
这个组件一定要是产生滚动条的组件！
这个组件一定要是产生滚动条的组件！

举个栗子，App.vue中的栗子

<template>
  <div id="app" class="wrapper" style="height:520px;overflow: auto;">
    <div class="wrapper-content" style="height:2020px;background-color:aliceblue;text-align:center;position:relative;">
      <!-- 回到顶部 -->
      <template>
        <el-backtop target=".wrapper-content"></el-backtop>
      </template>

      <div>顶部</div>
      <div style="position:absolute;bottom:0;left:49%;">底部</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
html,body,#app {
  height: 100%;
}
</style>

这样是不会产生按钮的，因为wrapper-content组件不会产生滚动条，更不会有滚动事件，要把target改成 target=“.wrapper”，因为真正产生滚动事件的是wrapper。

注意这句样式：

 <div id="app" class="wrapper" style="height:520px;overflow: auto;">

要给父组件overflow: auto，和高度，否则父组件会被自动撑开，不产生滚动事件（如果有滚动条那也是上级的，如果上级一直没有设置height那就是window的）；把520px设置为100%也是没有用的，可以用document.body.offsetHeight这个方法设置适合屏幕的高度；若不想设置具体高度则加上下面这句样式，把上级高度全部100%也是管用的

html,body,#app {height: 100%;}

附上官网介绍
在这里插入图片描述

target最好用id，因为唯一
template必不可少
使用target以外的属性时一定要用冒号（v-bind），因为它接收的是数字，不用冒号只能传字符串，如

<el-backtop target=".wrapper" :visibility-height="200" :right="40" :bottom="40"></el-backtop>