js锚点定位

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;

      },