Element UI中的BackTop无法使用的解决方案

问题描述

最近在写个人博客时使用elementUI来作为前端框架，但是当我使用到BackTop时发现无法使用的现象。

具体表现为：滚动页面后该返回顶部按钮组件并没有出现。

ElementUI官网文档：https://element.eleme.cn/#/zh-CN/component/backtop

问题分析

在查阅了大量文章后，发现该组件的实用方式很简单，直接引入即可，如下图是最简单的使用方法，但是需要在某个容器里如div。

实际上，target属性并不需要的

一个更加直观的代码可以这样

于是我创建了一个新的页面并且使用该方法发现出现了该组件，代表该组件是没有问题的。

但是在我的项目里面却无法使用，原因我分析了一下，可能原因有：

1. 我在index.html设置了body{overflow:hidden}
2. 我是在中使用的该组件

解决方法

BackTop组件监听的是body的滚动，所以body的高度需要超出显示高度出现滚动条才行，overflow属性不能为hidden。并且如果是在某个div内使用的话则可以使用下面我封装的组件。

 

于是，我查看了BackTop组件的原码，发现有点复杂（我是萌新），然后我决定还是自己写一个BackTop吧

以下为我封装的一个BackTop组件，是以ElementUI为基础的，需要用到ElementUI里的el-button与el-icon

组件使用方法：

其中五个属性可自定义传值，也可以不传值

• length：为向下滚动的xx距离后，出现BackTop，传数字类型，默认200
• bottom、right：离底边、右边的距离，传数字类型，默认50
• icon：为按钮的图标，传入字符串类型，图标名称参考：https://element.eleme.cn/#/zh-CN/component/icon
• speed：为向上滚动速度单位是px，传入数字类型，默认100

注意事项是改组件会自动监听它所在最近父亲节点，建议将父亲节点的样式设置为：

.parent{
    overflow-y:scroll;
    //height:固定值
}

还有就是页面内容超出才能触发滚动，才能导致该组件出现

当然可以改写该组件变成规定几秒内返回顶部，而非以规定速度返回顶部，有待各位大佬自行修改了