vue 监听滚动条 页面滚动动画

以页面底部的“回到顶部”功能为例，滚动动画的实现思路是，当点击按钮时，获取当前滚动条的位置，调用定时器函数，每个时间间隔对滚动条的位置递减，直至减小到0，清除定时器，即可回到页面顶部。

当滚动条没有离开首页的一个屏幕高度时，“回到顶部”按钮应设为不可见，可以监听当前滚动条的位置，小于一个屏幕高度时，将按钮的v-show属性设为false，大于一个屏幕高度时，则设为true。

代码示例

获取滚动条当前位置
document.documentElement.scrollTop || document.body.scrollTop
获取屏幕高度
window.innerHeight

弄懂了这个原理之后，顶部导航条的实现就十分简单了，如果不想写滚动动画的话，在标签的href属性中填入目标跳转位置的元素的id，就可以非常方便的直接跳转。

插个题外话，如何优雅地修改标签的默认样式
主要是设置 a:link a:visited a:hover a:active 这几个css属性

a {// 清除默认下划线text-decoration: none;
 }// 超链接初始样式
 a:link {color: #8e9eab;
 }// 超链接被访问后的样式
 a:visited {color: #8e9eab;
 }// 鼠标悬停时的样式
 a:hover {color: #4f4f4f;
 }// 点击超链接时的样式
 a:active {color: #8e9eab;
 }