vue实现锚点定位的代码怎么写

本篇内容主要讲解“vue实现锚点定位的代码怎么写”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue实现锚点定位的代码怎么写”吧!

具体代码如下：

vue

<el-row :gutter="20">   <el-col :span="3">    <!--导航选择事件-->    <el-menu :default-active="activeStep" @select="jump">     <el-menu-item v-for="(item,index) in menuData" :index="`${index}`" :key="item.subjectId">      <i class="el-icon-menu"></i>      <span slot="title">{{item.subjectName}}</span>     </el-menu-item>    </el-menu>   </el-col>   <!--绑定scroll事件需要监听-->   <el-col :span="21" class="scroll_cls" @scroll="onScroll">    <div v-for="(item,index) in tableObject" :key="index" >     <div class="title scroll-item" :id="item.name">{{item.name}}</div>     <el-table :data="item.rows" :key="index">      <el-table-column label="序号" type="index" width="50"></el-table-column>      <el-table-column prop="channelId" label="渠道/团队id"></el-table-column>      <el-table-column prop="channelName" label="渠道/团队"></el-table-column>      <el-table-column prop="ruleCode" label="分配方案id"></el-table-column>      <el-table-column prop="ruleName" label="分配方案名称"></el-table-column>      <el-table-column prop="ruleVersion" label="版本号"></el-table-column>      <el-table-column prop="hierarchy" label="级别">       <template slot-scope="scope">        <span>{{scope.row.hierarchy == 1 ? '项目' : '渠道团队'}}</span>       </template>      </el-table-column>      <el-table-column label="有效期">       <template slot-scope="scope">        <span>{{scope.row.beginTime + '-' + scope.row.endTime}}</span>       </template>      </el-table-column>      <el-table-column prop="creatorName" label="操作人"></el-table-column>      <el-table-column prop="createTime" label="操作时间"></el-table-column>      <el-table-column prop="orderCnt" label="关联订单">       <template slot-scope="scope">        <el-button         @click="orderHandleClick(scope.row.orderCnt)"         type="text"         size="small"        >{{scope.row.orderCnt}}</el-button>       </template>      </el-table-column>      <el-table-column label="操作">       <template slot-scope="scope">        <el-button @click="settingHandleClick(scope.row)" type="text" size="small">设置分配方案</el-button>       </template>      </el-table-column>     </el-table>     <el-pagination      v-if="item.total > 5"            size="small"      @size-change="handleSizeChange($event,index)"      @current-change="handleCurrentChange($event,index)"      :current-page="ruleForm.ageNum"      :page-sizes="[10, 30, 50, 100]"      :page-size="ruleForm.pageSize"      layout="total, sizes, prev, pager, next"      :total="item.total"     ></el-pagination>    </div>   </el-col></el-row>

js

// 滚动触发按钮高亮methods: {  onScroll(e) {            let scrollItems = document.querySelectorAll(".scroll-item");            console.log(scrollItems)            console.log(e)   for (let i = scrollItems.length - 1; i >= 0; i--) {    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离    let judge =     e.target.scrollTop >=     scrollItems[i].offsetTop - scrollItems[0].offsetTop;    if (judge) {                    console.log(i)     this.activeStep = i.toString();     break;    }   }  },  jump(index) {            console.log(index)   let target = document.querySelector(".scroll_cls");   let scrollItems = document.querySelectorAll(".scroll-item");   // 判断滚动条是否滚动到底部   if (target.scrollHeight <= target.scrollTop + target.clientHeight) {                console.log(index)                console.log(typeof index)    this.activeStep = index;   }            let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop; // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)            console.log(total)            let distance = document.querySelector(".scroll_cls").scrollTop; // 滚动条距离滚动区域顶部的距离            console.log(distance)   // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)   // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次   // 计算每一小段的距离   let step = total / 50;   if (total > distance) {    smoothDown(document.querySelector(".scroll_cls"));   } else {    let newTotal = distance - total;    step = newTotal / 50;    smoothUp(document.querySelector(".scroll_cls"));   }   // 参数element为滚动区域   function smoothDown(element) {    if (distance < total) {     distance += step;                    element.scrollTop = distance;     setTimeout(smoothDown.bind(this, element), 10);    } else {     element.scrollTop = total;    }   }   // 参数element为滚动区域   function smoothUp(element) {    if (distance > total) {     distance -= step;     element.scrollTop = distance;     setTimeout(smoothUp.bind(this, element), 10);    } else {     element.scrollTop = total;    }   }   document.querySelectorAll('.scroll-item').forEach((item, index1) => {     if (index === index1) {       item.scrollIntoView({         block: 'start',         behavior: 'smooth'       })     }   })  },  }, mounted() {       this.$nextTick(() => {           console.log(1)           window.addEventListener('scroll', this.onScroll,true)       })    },

css

.scroll_cls {    height: 500px; overflow: auto;}

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

到此，相信大家对“vue实现锚点定位的代码怎么写”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！