vue界面:
<el-tabs v-model="active" @tab-click="jumpTitle">
<el-tab-pane v-for="(item, index) in steps"
:key="index" :label="item" :name="item"></el-tab-pane>
</el-tabs>(steps里是各个按钮的名字,只有一个按钮的话,可以传id或ref注册的名字到方法中)
<el-card ref="leftNewsDiv" @scroll.native="handleScroll" class="reviewLDCardStyle" :body-style="{ height:'92% ',}" >
<p class="mianDFont"><img :src="imgurl" class="imgDStyle">1</p>
<p class="mianDFont"><img :src="imgurl" class="imgDStyle">基本情况</p>
</el-card>
js方法
//根据按钮的不同,跳转到不同的位置
jumpTitle() {
let nodeList = document.querySelectorAll('.mianDFont');
let index = this.steps.indexOf(this.active);
let element = nodeList[index];
let material = this.$refs.leftNewsDiv.$el;($el是挂载到实际dom上,没有$el则是虚拟dom)
const scrollTop =element.offsetTop;
//父元素一定要有定位,定位可以是relative,或者resolution,会根据最近的有定位的父元素来计算,若没有定位,就是相对于body的位置
material.scrollTo({
top: scrollTop,
behavior: 'smooth' // 平滑滚动
});
},
//根据滚动事件,改变tab选中的名字
handleScroll() {
let nodeList = document.querySelectorAll('.mianDFont');
nodeList.forEach((item, index) => {
//获取滚动的高度,加上标题的高度(方便能正好定位到标题)
let scrollTop = this.$refs.leftNewsDiv.$el.scrollTop;
if (scrollTop >= item.offsetTop) {
this.active = this.steps[index];
}
})
}