2021-03-22 vue实现锚点跳转scrollIntoView

数据结构

modelList=[
  {
    name:'课程内容'，
    modelCode:'KTFK'
  },
  {
    name:'重难点视频讲解'，
    modelCode:'KTFK'
  }......
]

左边模块小标题 右边模块内容

// 标题

  {{item.name}}


//内容

  

    内容
  


menuSelect(index){
  // 滚到指定元素
  this.$el.querySelector(`#${this.modelList[index].modelCode}`).scrollIntoView({
    behavior: 'smooth'
  })
},
// 滚动定位 用于左边菜单栏 标记为选中 绿色
    scrollEvent(e) {
      let scrollTop = e.target.scrollTop
      // 课程名称是写死的。这里做了特殊判断处理
      let firstHeight = this.$refs.fileName.$el.offsetHeight + 20
      if (scrollTop < firstHeight) {
        this.currentMenu = -1
      } else {
        let modelHeight = 0
        for (let i = 0; i < this.modelList.length; i++) {
          modelHeight += this.$refs.model[i].$el.offsetHeight + 20
          if (scrollTop - firstHeight - modelHeight < 0) {
            this.currentMenu = i
            break
          }
        }
      }
    },

1.png