2020-06-04 vue简单实现返回顶部，带动画过渡效果

1.结构

<li @click="backTop">
      顶部                          
 </li>
```
2.
  ```
//返回顶部
backTop() {
 let top = document.documentElement.scrollTop || document.body.scrollTop
 // 实现滚动效果
 const timeTop = setInterval(() => {
   document.body.scrollTop = document.documentElement.scrollTop = top -= 50
   if (top <= 0) {
     clearInterval(timeTop)
   }
 }, 10)
},
```



二,固定导航
```
// 事件监听滚动条
            window.addEventListener('scroll', this.watchScroll)
```

```
//固定头部导航
            watchScroll () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                //  当滚动超过 50 时，实现吸顶效果
                if (scrollTop > 50) {
                    this.navBarFixed = true
                } else {
                    this.navBarFixed = false
                }
            },
            destroyed () {
                window.removeEventListener('scroll', this.watchScroll)
            },
```