Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

检测滚动条

mounted() {
  window.addEventListener('scroll', this.windowScroll)
},
methods: {
  windowScroll() { //检测滚动条
    // 滚动条距离页面顶部的距离
    // 以下写法原生兼容
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
     console.log(scrollTop); //输出距离顶部的距离
  }
},
beforeDestroy() {
  window.removeEventListener('scroll', this.windowScroll)
}

滚动条滑动

export default {
  name: "header",  
  setup(){
    const toTop = ()=>{
      window.scrollTo({top:0,behavior:'smooth'}) ////距离顶部距离0
    }
    const showM = (val)=>{ //点击箭头向下滑动
      // document.getElementById("Main").scrollIntoView(); //这种是直接跳转到id元素处
      window.scrollTo({top:710,behavior:'smooth'}) //距离顶部距离710
    }

    return{
      showM,toTop
    }
  },
}

较完整代码

<script>
export default {
  name: "header",
  data () {
    return {
      scrollDis: 0
    }
  },
  setup(){
    const toTop = ()=>{
      window.scrollTo({top:0,behavior:'smooth'})
    }
    const showM = (val)=>{ //点击箭头向下滑动
      // document.getElementById("Main").scrollIntoView();
      window.scrollTo({top:710,behavior:'smooth'})
    }

    return{
      showM,toTop
    }
  },
  mounted() {
    window.addEventListener('scroll', this.windowScroll)
  },
  methods: {
    windowScroll() { //检测滚动条
      // 滚动条距离页面顶部的距离
      // 以下写法原生兼容
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.scrollDis = scrollTop
      // console.log(scrollTop);
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.windowScroll)
  }

}
</script>