element锚点，动态滚动定位相应的标题

 <!--标题-->
<el-tabs
  class="mt30"
  v-model="tabName"
  @tab-click="jump">
  <el-tab-pane
	v-for="(tab, index) in tabs"
	:name="tab.refName"
	:key="index"
	:label="tab.name"
  ></el-tab-pane>
</el-tabs>
<!-- 内容 -->
<div
  class="scroll-content"
  @scroll="onScroll"
  :style="'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height"
>
  <!-- 信息0 -->
  <div :ref="tabs[0].refName" class="scroll-item mt10">
	<el-descriptions title="信息0" :column="2" border>
	  <el-descriptions-item label="名字" v-for="(item,index) in 20" :key="index">名字</el-descriptions-item>
	</el-descriptions>
  </div>

  <!-- 信息1 -->
  <div :ref="tabs[1].refName" class="scroll-item mt20">
	<el-descriptions title="信息1" :column="2" border>
	  <el-descriptions-item label="名字" v-for="(item,index) in 20" :key="index">名字</el-descriptions-item>
	</el-descriptions>
  </div>

  <!-- 信息2 -->
  <div :ref="tabs[2].refName" class="scroll-item mt20">
	<el-descriptions title="信息2" :column="2" border>
	  <el-descriptions-item label="名字" v-for="(item,index) in 20" :key="index">名字</el-descriptions-item>
	</el-descriptions>
  </div>
</div>

tabIndex: '0',
contentStyleObj: {
	height: '100px',
},
tabName: 'first',
tabs: [
	{
	  name: '信息0',
	  refName: 'first',
	},
	{
	  name: '信息1',
	  refName: 'second',
	},
	{
	  name: '信息2',
	  refName: 'third',
	},
],

created() {
	this.getHight()
	window.addEventListener('resize', this.getHight)
},
destroyed() {
	window.removeEventListener('resize', this.getHight)
},
methods: {
	 // tab click
	jump(tab, event) {
	  let target = document.querySelector('.scroll-content')
	  let scrollItems = document.querySelectorAll('.scroll-item')
	  // 判断滚动条是否滚动到底部
	  if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
		this.tabIndex = tab.index.toString()
	  }
	  let totalY = scrollItems[tab.index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
	  let distance = document.querySelector('.scroll-content').scrollTop // 滚动条距离滚动区域顶部的距离
	  // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
	  // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
	  // 计算每一小段的距离
	  let step = totalY / 50
	  if (totalY > distance) {
		smoothDown(document.querySelector('.scroll-content'))
	  } else {
		let newTotal = distance - totalY
		step = newTotal / 50
		smoothUp(document.querySelector('.scroll-content'))
	  }

	  // 参数element为滚动区域
	  function smoothDown(element) {
		if (distance < totalY) {
		  distance += step
		  element.scrollTop = distance
		  setTimeout(smoothDown.bind(this, element), 10)
		} else {
		  element.scrollTop = totalY
		}
	  }

	  // 参数element为滚动区域
	  function smoothUp(element) {
		if (distance > totalY) {
		  distance -= step
		  element.scrollTop = distance
		  setTimeout(smoothUp.bind(this, element), 10)
		} else {
		  element.scrollTop = totalY
		}
	  }
	},
	// 滚动条滚动
	onScroll(e) {
	  let scrollItems = document.querySelectorAll('.scroll-item')
	  for (let i = scrollItems.length - 1; i >= 0; i--) {
		// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
		let judge =
		  e.target.scrollTop >=
		  scrollItems[i].offsetTop - scrollItems[0].offsetTop - 150
		if (judge) {
		  this.tabIndex = i.toString()
		  // 找对应的tab-name值
		  this.tabName = this.tabs[this.tabIndex].refName
		  break
		}
	  }
	},
	getHight() {
	  this.contentStyleObj.height = window.innerHeight - 450 + 'px'
	},
}	

若详情弹框中使用，默认每次打开是上一次滚动的位置，想设置每次打开为第一个tab

this.showDialog = true
this.$nextTick(()=>{
  this.tabIndex = '0'
  this.tabName = this.tabs[this.tabIndex].refName
  let element = document.querySelector('.scroll-content')
  element.scrollTop = 0
})

测试时出现tab多导致点击最后一个无法定位问题 

<div
  class="scroll-content"
  @scroll="onScroll"
  :style="'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height>
...
</div>

getHight() {
  this.contentStyleObj.height = window.innerHeight - 450 + 'px'
},

调整高度问题

每个.scroll-item不易过小，若还出现点击错误问题

.scroll-item{
  min-height: 200px;
  margin-bottom: 50px;
}

<div
    ref="scroll"
    class="scroll-content"
    @scroll="onScroll"
    :style=" 'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height">
  <div :ref="tabs[0].refName" class="scroll-item mt10">