el-backtop置顶功能报错和页面不展示问题

问题描述

根据官网例子直接使用发现页面并没有反应，而且可能还会遇到报错
target is not existed: .page-component__scroll .el-scrollbar__wrap的问题

<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>

解决方案：

这时候需要检查一下代码以下几种情况
1.指定target属性，要指向需要滚动条的组件（这里容易有误区，直接复制案例不修改）。
2.<el-backtop></el-backtop>一定要写在最外层块级区域的第一行。
3.需要滚动的区域不能设置overflow: hidden，这也可能造成页面看不见组件。如果你有全局css设置了overflow: hidden，你需要在滚动的区域上添加样式overflow: auto。

实例代码

<template>
	<div class="container"> // 最高级容器块
		<el-backtop target=".content" :right="20" :bottom="50"><i class="el-icon-caret-top"></i></el-backtop> // 写在第一行
		<div class="content"></div> // 如果需要用到overflow设置成overflow: auto
	</div>
</template>

这是我在这次使用时忽略的问题 分享一下~