vue中的锚点定位问题

第vue中的锚点定位问题目录vue锚点定位锚点定位与平滑滚动反定位支持锚点定位bug无效和替代方式在vue项目中定义一个方法不适用锚点定位

vue锚点定位

锚点定位与平滑滚动反定位支持

代码如下

html

div

el-tabsv-model="activeTabs"tab-position="left"@tab-click="tabshandleClick"

el-tab-panelabel="主要致险情景"name="zxqj"/el-tab-pane

el-tab-panelabel="风险防控基本要求"name="yq"/el-tab-pane

el-tab-panelabel="管理措施"name="glcs"/el-tab-pane

/el-tabs

div

//要切换滚动的内容区域

divref="content"

divid="zxqj"介绍/div

divid="yq"课程目录/div

divid="glcs"课后福利/div

/div

js

mounted(){

//1.mounted里面自动监听滚动事件

代码如下

this.$refs.content.onscroll=()={

this.handleScroll();

methods:{

handleScroll(){

letscrollTop=this.$refs.content.scrollTop;

letblocks=document.querySelectorAll('.conBlock');

blocks.forEach((item,index)={

console.log("blocks",item.id)

if(scrollTop=item.offsetTop){

this.activeTabs=item.id;

}

})

tabshandleClick(data){

console.log("data",data)

letindex=Number(data.index)

letblocks=document.querySelectorAll('.conBlock');

letstep=40;//滚动步长

letcurrentScrollTop=this.$refs.content.scrollTop;

lettargetOffsetTop=blocks[index].offsetTop;

console.log("currentScrollTop",currentScrollTop);

console.log("targetOffsetTop",targetOffsetTop);

if(currentScrollToptargetOffsetTop){

constsmoothUp=()={

if(currentScrollTop=targetOffsetTop){

if(currentScrollTop-targetOffsetTop=step){

currentScrollTop-=step;

setTimeout(smoothUp,1);

}else{

currentScrollTop=targetOffsetTop-step;

}

this.$refs.content.scrollTop=currentScrollTop;

}

};

smoothUp();

}else{

constsmoothDown=()={

if(currentScrollTop=targetOffsetTop){

//如果和目标相差距离大于等于step就跳step

if(targetOffsetTop-currentScrollTop=step){

currentScrollTop+=step;

setTimeout(smoothDown,1);

}else{

//否则直接跳到目标点，防止跳过

currentScrollTop=targetOffsetTop-step;

}

this.$refs.content.scrollTop=currentScrollTop;

}

};

smoothDown();

}

}

锚点定位bug无效和替代方式

在vue项目中，使用锚点定位会和router的规则冲突，在项目中的表现就是第一次点击url改变了，但是没有跳转到锚点位置，再次点击才会跳转。

在vue项目中定义一个方法不适用锚点定位

scrollToSection(id){

letsec