Vue-Element-Ui 或 Antd 页面置顶，解决引入不显示，很有效~

本文来源取自于这里,不仅学习,还要搬运~

若已引入Element-Ui 可以选择跳过此处 直接看下方结果

安装Element-Ui命令如下:

npm i element-ui -S

Main.js 当中 补上 下方Element-Ui文件

import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
import App from './App.vue'; 

Vue.use(ElementUI);

首先我们先进入Element-Ui官网 找到这个 Backtop 回到顶部

然后我们看一下正常步骤来讲，使用Element-Ui 置顶产生的效果如下，没错,会根据页面滚动条显示置顶按钮

好了，回归正题，看结果

target这个属性及其重要，它代表你要监听滚动的对象！！！如果不对是不会触发的

// 带有滚动条的盒子 盒子的类名为 .top-box
<div class="top-box" style="height: 800px;overflow-y: auto">
   <div v-for="item in 500">{{item}}</div>
   
   // 所以置顶属性栏 target 所监听的滚动对象则是这个盒子 
   // 是不是瞬间茅塞顿开,还是不够细心促使我们相遇嗷,hahaha.....
   <el-backtop target=".top-box" :visibility-height=400></el-backtop>
</div>

Antd 也是同理 target很重要

<div class="top-box" style="height: 800px;overflow-y: auto">
   <div v-for="item in 500">{{item}}</div>
  <a-back-top target=".top-box"/>
</div>