【vue例子】vue实现侧边栏点击top，动画滚动到顶端

 <a class="scroll-to-top" @click="toTop">
      <i class="fa fa-angle-double-up">i>
    a>
    //样式可以自己写
    <script>
export default {
  data() {
    return {
      i: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    // 点击滚动向上
    handleScroll() {
      // 获取页面顶部的高度，要写！！这样页面滚动的时候才能获取到页面滚动距离顶部的高度
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const scrollBox = document.querySelector('.scroll-to-top')
      scrollTop > 300 ? scrollBox.style.opacity = 1 : scrollBox.style.opacity = 0
      // const scroll = scrollTop - this.i
      this.i = scrollTop
    },
    toTop() {
      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)
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37