Vue中锚点定位如何实现精准跳转至页面特定位置？

本文共计580个文字，预计阅读时间需要3分钟。

目录 + Vue中按钮定位 + 按钮定位与滚动条联动定位支持 + 按钮定位bug无效及替代方案 + 在Vue项目中定义一个方法不适用于按钮定位 + Vue按钮定位 + 按钮定位与滚动条联动定位支持 + 代码示例 + HTML + div + span

目录

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

vue锚点定位

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

代码如下

html

<div style="display: flex;height: 442px;">                        <el-tabs v-model="activeTabs" class="zxtabsStyle" tab-position="left" @tab-click="tabshandleClick">                         <el-tab-pane label="主要致险情景" name="zxqj"></el-tab-pane>                         <el-tab-pane label="风险防控基本要求" name="yq"></el-tab-pane>                         <el-tab-pane label="管理措施" name="glcs"></el-tab-pane>                        </el-tabs>                        <div>  //要切换滚动的内容区域 <div class="con_tab" ref="content">     <div id="zxqj" class="conBlock">介绍</div>     <div id="yq" class="conBlock">课程目录</div>     <div id="glcs" class="conBlock">课后福利</div> </div>

js

mounted(){ //1.mounted里面自动监听滚动事件   代码如下 this.$refs.content.onscroll = ()=>{      this.handleScroll();  } }, methods:{         handleScroll () {      let scrollTop = this.$refs.content.scrollTop;       let blocks = 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)             let index=Number(data.index)     let blocks = document.querySelectorAll('.conBlock');     let step = 40;//滚动步长     let currentScrollTop = this.$refs.content.scrollTop;     let targetOffsetTop = blocks[index].offsetTop;     console.log("currentScrollTop",currentScrollTop);     console.log("targetOffsetTop",targetOffsetTop);     if(currentScrollTop > targetOffsetTop){         const smoothUp = ()=>{             if(currentScrollTop >= targetOffsetTop){                 if (currentScrollTop - targetOffsetTop >= step) {                     currentScrollTop -= step;                     setTimeout(smoothUp,1);                 } else {                     currentScrollTop = targetOffsetTop-step;                 }                 this.$refs.content.scrollTop = currentScrollTop;             }         };         smoothUp();     }else{         const smoothDown = ()=>{             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) {    let section = document.getElementById(id)    if (section) {       section.scrollIntoView()    } }

html标签中绑定click事件就可以了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。