一键回到顶部是页面经常需要的功能，特别是对于页面中含有列表的情况。通常情况下使用vue进行前端开发可以直接使用element-plus中的回顶组件，但在实际项目中大多数人一定遇到过回顶组件添加了但不生效的问题，甚至无法渲染出来。本文是我自己在使用该组件时遇到的坑做出的总结。
首先关于组件的基本用法以及API建议参考官方文档写的十分详细：element-plus.org/zh-CN/compo…
<template>
Scroll down to see the bottom-right button.
<el-backtop :right="100" :bottom="100" />
</template>
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap">
</el-backtop>
</template>
如果是简单的页面，直接使用那没问题但遇到复杂的大项目时组件之间的嵌套会特别深，再加上各种div的包裹，回顶组件通常无法生效了。这里出现问题的关键在于target属性。
官方文档中给出的解释如下：
| target | 触发滚动的对象 | string | — |
| visibility-height | 滚动高度达到此参数值才出现 | number | 200 |
| right | 控制其显示位置，距离页面右边距 | number | 40 |
| bottom | 控制其显示位置，距离页面底部距离 | number | 40 |
没错，target要指向触发滚动的对象——通俗来讲即这个滚动条到底是哪个最外侧组件的。
可以说target指向的就是这个滚动条，其监测的高度变化也是这个滚动条的高度变化。
那么，问题来了实际开发中项目复杂，页面层级嵌套巨多。这时该如何快速定位到滚动的对象是哪个呢。这里我搜索了很久，发现有人提供了方法具体参考链接：blog.csdn.net/syl19980202…
其次还有一点，产生滚动条的父组件应该有这样的css样式
// 高度和 overflow: auto属性是必给的否则父组件会被自动撑开，不产生滚动事件
// 也就是没有滚动条，那target指向".scroll_main"就没有意义了
// 也可以通过overflow: auto属性定位滚动的目标是哪个
.scroll_main {
height:520px;
overflow: auto;
}
最后需要注意的地方是组件的位置，要写于最外层块级区域的第一行，不可写于代码末尾。
<div class="scroll_main">
<el-backtop target=".scroll_main"></el-backtop>
<div class="table">我是列表</div>
</div>
<style>
.scroll_main {
height:520px;
overflow: auto;
}
</style>
通常情况下，一个页面最外层一定有个父div包着，然后真正看到的比如这个table有一百条数据那页面高度固定了就多的就有滚动条来滚动显示，那此时el-backtop就别放在这个"table"div里面拿出来然后放上面就可以了。
最后看具体情况的使用，一般回顶组件按照这么写都不会有问题了。
总结：
- 找到滚动的对象是哪个
- el-backtop组件的位置要放好
- 滚动的对象需要有给高度和overflow: auto属性（scroll应该也行）
参考链接：
