vue返回顶部带动画

一. 需求

首页内容多，翻过首页第一页，显示返回顶部按钮

二. 逻辑

1.判断返回顶部按钮什么时候显示：

借助@scroll监听滚动，获取当前滚动距离顶部的高度，获取当前屏幕高度，当滚动高度大于屏幕高度，显示返回顶部按钮，反之小于隐藏。

2.点击按钮，为返回顶部加上动画：

设置步进值，通过逐渐增加步进值，来实现动画效果。注意这里要防止用户多次点击，加上开关。

三.遇到的问题

1.设置window.scrollTop(0,滚动高度) 和document.documentElement.scrollTop=滚动高度 无效：

由于是加在id=box上的滚动，并且由于头部底部fixed固定，中间box也设置了固定定位。样式设置的差异与理想的较大，滚动区域实际是box，并且查看了监视滚动方法getScrollTop方法，确定滚动元素是box,所以给box加上ref属性获取到，并将滚动的高度赋值给this.$refs.box.scrollTop

2.滚动缓慢：

在setInterval里未设置步进值steep递增，匀速滚动效果体验差。

四.代码参考