基于vue监听滚动事件，实现锚点内容平滑滚动，动态修改锚点状态

基于vue监听滚动事件，实现锚点链接平滑滚动，动态修改锚点状态，锚点定位（双向）

项目场景：报告目录内容框滚动，动态修改目录章节的锚点状态，点击目录章节的锚点，滚动到目标内容

点击右边对应的章节，左边内容区域滚动到对应内容区域
左边内容区域滚动内容，右边的章节锚点动态修改

问题描述：

内容平滑滚动，瞄点状态修改，监听内容高度，滚动距离

解决方案：

//左侧内容框
<div>
  <h2>{{result.name}}</h2>
  <ul>
    <li v-for="(item,i) in rep_tab_cont" :key="i" :index="item.id" class="jump">
      <h3>{{item.title}}</h3>
      <pre>{{item.content}}</pre>
    </li>
  </ul>
</div>
//右侧目录章节
<div class="float_fixed">
     <p class="title">目录章节</p>
      <ul>
        <li 
        :class="[curt==index?'curt':'']" 
        v-for="(item,index) in result.table_of_catalogue" :key="index"
        @click="jump(item.id)">
          {{item.title}}
        </li>
      </ul>
 </div>

data(){
	return{
		scrollTop:0,
          	curt:0,
          	offset_list:null,
	}
},

mounted(){
    this.$nextTick(function() {
      //修改事件监听
      window.addEventListener("scroll", this.handleScroll);
      window.addEventListener('scroll', this.onScroll)
    });
    // 监听滚动事件，修改锚点状态
    const _this = this;
    setTimeout(()=>{
      const catalogList = document.querySelectorAll('.jump');
      const catalog = document.querySelectorAll('.jump')[0];
      // var length = catalogList.length;
      // console.log('catalogList,length',catalogList,length,catalog);
      let offsetList=[]
      if(catalogList.length>0){
        for (let i = 0; i < catalogList.length; i++) {
          const element = catalogList[i];
          offsetList.push(
          	{top: element.offsetTop, height: element.offsetHeight, index: i});
        }
      }
      console.log('offsetList',offsetList);
      _this.offset_list = offsetList;
      catalog.addEventListener('scroll', _this.onScroll);
    }, 500)
  },

destroyed() {
   	window.removeEventListener("scroll", this.handleScroll);
    window.removeEventListener("scroll", this.onScroll);
},

//滑动报告目录--》目录章节对应锚点变化；
onScroll(){
  var _this = this
   _this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // console.log(_this.scrollTop);
   if(_this.offset_list.length>0){
     for (let i = 0; i < _this.offset_list.length; i++) {
       const obj = _this.offset_list[i];
       if(_this.scrollTop >= obj.top-100 ){
         // scrollTop的移动位置要在类别的列表中才显示对应锚点的当前状态
           _this.curt = obj.index;
       }
     }
   }
},
//点击目录章节锚点去对应的内容；
handleScroll() {
  this.scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
  if (this.scrollTop > 700) {
    this.fixed_box = true;
  } else {
    this.fixed_box = false;
  }
},
//点击目录章节跳到对应报告目录；实现锚链接平滑滚动
jump(e){
  // console.log(e);
  this.curt=e
  let jump = document.querySelectorAll(".jump");
 jump[e].scrollIntoView({ block: "start", behavior: "smooth",inline:"center" });
},
锚点滚动动画```
![在这里插入图片描述](https://img-blog.csdnimg.cn/228fe75f864d4cd88bc1ba77f2cc559c.png)