vue锚点定位（tab切换定位不同的div位置）

1、效果演示

2、HTML部分

<div class="tabs">
	<div class="info_tit">
		<span class="pointer css3" @click="goNavList(0,'area0')"
			:class="index==0?'active':'hover_span'">{{lang=='CN' ?'集团简介':'Group profile'}}</span>
		<span class="pointer css3" @click="goNavList(1,'area1')"
			:class="index==1?'active':'hover_span'">{{lang=='CN' ?'创始人介绍':'Introduction to the Founder'}}</span>
		<span class="pointer css3" @click="goNavList(2,'area2')"
			:class="index==2?'active':'hover_span'">{{lang=='CN' ?'组织架构':'Organizational structure'}}</span>
		<span class="pointer css3" @click="goNavList(3,'area3')"
			:class="index==3?'active':'hover_span'">{{lang=='CN' ?'企业文化':'The enterprise culture'}}</span>
		<span class="pointer css3" @click="goNavList(4,'area4')"
			:class="index==4?'active':'hover_span'">{{lang=='CN' ?'荣誉资质':'Honorary certificate'}}</span>
	</div>
</div>
<div class="areas">
	<!-- area0 GO -->
	<div class="div1 introduct css3" ref="area0">
		area0
	</div>
	<!-- area1 GO -->
	<div class="div2 introduct css3" ref="area0">
		area1
	</div>

	<!-- area2 GO -->
	<div class="div3 introduct css3" ref="area0">
		area2
	</div>
	<!-- area3 GO -->
	<div class="div4 introduct css3" ref="area0">
		area3
	</div>

	<!-- area4 GO -->
	<div class="div1 introduct css3" ref="area0">
		area4
	</div>

</div>

3、JS部分

			 //data()
            data(){
                return:index:0,
            }
        
            //方法
            toggleNext(index) {
				this.goNavList(index)
			},
           
			//页面锚点定位
			goNavList(val,area) {
				this.index = val
				// 获取 内容DIV元素在页面中的位置，div1、div2、div3.. 用padding-top，控制在tab标签下
				// console.log(this.$refs[area].getBoundingClientRect().top);
				switch (val) {
					case 0:
						 this.$el.querySelector(".div1").scrollIntoView({ block: "start", behavior: "smooth" });
						break;
					case 1:
						 this.$el.querySelector(".div2").scrollIntoView({ block: "start", behavior: "smooth" });
						break;
					case 2:
						 this.$el.querySelector(".div3").scrollIntoView({ block: "start", behavior: "smooth" });
						break;
					case 3:
						 this.$el.querySelector(".div4").scrollIntoView({ block: "start", behavior: "smooth" });
						break;
					case 4:
						 this.$el.querySelector(".div5").scrollIntoView({ block: "start", behavior: "smooth" });
						break;
					default:
						break;
				}
			},