pc端多页面公用回到顶部功能

在pc端，页面超过可视区高度后便会有滚动条，那么回到顶部的功能就必不可少了。

现在我面临的情况：

1、点击回到顶部，默认隐藏，滚动超过一定距离才显示回到顶部icon

2、部分页面不需要回到顶部功能，比如登录、修改密码等模块；

3、滚动效果的实现使用的是element-ui的scrollbar组件，看了下源码，并没有向外派发任何事件，仅仅实现了滚动效果，不提供诸如下拉刷新、回到顶部、返回滚动距离等api，所以只能用其它方法监控滚动事件；

组件可以展示在每个页面上，但是滚动事件是属于每个页面的，互不关联，所以必须给每个页面绑定各自的滚动事件和回到顶部事件，事件无法共用。

思路一：

每个需要展示的页面引入backTop组件，并注册onscroll事件和goToTop事件，通过页面自己来控制backTop的显示隐藏。

但是这样的话就太冗余了，有n个页面的话，就需要复制粘贴n次，不够简洁。

思路二：

做一个路由-id对照表，切换到相应的页面时才给该页面的滚动主题绑定事件，这样就可以共用方法了。

实现方法：

1、既然各个页面都会用到，肯定要做成一个公共组件

2、有些页面显示，有些不显示，通过router的meta配置

3、显示、隐藏通过vuex状态控制实现

4、组件引入位置放在App.vue上，这样可以保证所有页面都能显示

5、在mixins里监听滚动事件，判断滚动距离

6、回到顶部事件放在组件里

代码：

FixedSi