1：v-for渲染导航栏：
//
<div class="nav_box">
<div v-for="(item, index) in navList" :key="index" :class="index == activeIndex ? 'nav_item active' : 'nav_item'" @click="toTo(item, index)">
<span>{{ item .name }}</span>
</div>
</div>
2：导航栏点击的每一项item.href，都要跳到对应到 id=" xxxx " 位置；我们需要对toTo(item, index)方法进行处理；
3：toTo(item, index)方法处理 两种锚点定位 (直接复制)
toTo(item, index) {
this.activeIndex = index; //此处是点击导航栏高亮效果；
// 第一种方法 scrollIntoView 有滑动效果
// let element = document.querySelector(`${item.href}`);
// element.scrollIntoView({
// behavior: "smooth",
// block: "start",
// inline: "nearest"
// });
// 第二种方法 指定 定位的位置
let jump = document.querySelector(item.href);
// console.log('222333', jump)
// 获取需要滚动的距离，即元素在滚动的什么位置
let total = jump.offsetTop - 135;
//下面是不同浏览器兼容
// Chrome 谷歌（内核Blink）
document.body.scrollTop = total;
// Firefox 火狐（内核Gecko）
document.documentElement.scrollTop = total;
// Safari 苹果（内核webkit）
window.pageYOffset = total;
},
