vue中使用锚点定位

vue中不能使用a标签来使用锚点定位，可以使用自带的scrollIntoView方法

1、首先获取对应的需要定位的盒子ID 2、然后添加scrollIntoView方法，定义效果

属性及其含义：

block: "start", // 定义垂直方向的对齐，默认为 "start" // "start" 元素将滚动到可见区域的顶部 //"center" 元素将滚动到可见区域的中间 //"end" 元素将滚动到可见区域的最后 // "nearest" 元素将滚动到可见区域的附近 behavior: "smooth", //过渡动画 //"auto","instant","smooth”。默认为"auto"

完整代码如下：

<template> <ul class="res_title"> <li v-for="item in setList" :key="item.id" @click="achor(item)" > {{ item.name }} </li> </ul> </template> <script> export default { data() { return { setList: [ { id: 1, name: 'aaa', key: 'setone' }, { id: 2, name: 'bbb', key: 'setTwo' }, { id: 3, name: 'ccc', key: 'setThree' }, ], activeSet: 1, } }, methods: { achor(row) { this.activeSet = row.id // row.key 为对应的id名 document.querySelector(`#${row.key}`).scrollIntoView({ behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto" block: "start", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start" inline: "nearest" // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest" }) }, } }