vue锚点跳转到对应位置（精确定位）

安装:

npm install --save vue-scrollto

main.js引入

import Vue from 'vue'
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)

页面引用:

<template>
  <div class="scrollDemo">
    <div class="demoNav flex-center-center">
      <div
        class="demoNavItem"
        v-for="(item,index) in demoNavItem"
        :key="index"
        :class="{navActive : idx==index}"
        @click="changNav(index)"
      >{{item}}</div>
    </div>
    <div class="demoContent">
        <!-- 如果内容为循环，id则定义为:id="'demoItem'+index" -->
      <div class="demoItem0 demoItem" id="demoItem0">谷歌浏览器内容</div>
      <div class="demoItem1 demoItem" id="demoItem1">uc浏览器内容</div>
      <div class="demoItem2 demoItem" id="demoItem2">IE浏览器内容</div>
      <div class="demoItem3 demoItem" id="demoItem3">火狐浏览器内容</div>
      <div class="demoItem4 demoItem" id="demoItem4">360浏览器内容</div>
      <div class="demoItem5 demoItem" id="demoItem5">猎豹浏览器内容</div>
    </div>
  </div>
</template>
<script>
// 引入
var VueScrollTo = require("vue-scrollto");
export default {
  data() {
    return {
      idx: 0,
      demoNavItem: [
        "谷歌浏览器",
        "uc浏览器",
        "IE浏览器",
        "火狐浏览器",
        "360浏览器",
        "猎豹浏览器",
      ],
    };
  },
  methods: {
    // 导航选中效果
    changNav(index) {
      this.idx = index;
      VueScrollTo.scrollTo(document.getElementById("demoItem" + index), 1000, {
        offset: -50,
      });
    },
  },
};
</script>
<style  scoped>

.flex-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.demoNav {
    width: 100%;
    height: 70px;
    background: rgba(0, 31, 144, 1);
    position: sticky;
    left: 0;
    top: 0;
}
.demoNavItem {
  font-size: 40px;
  color: #fff;
  margin-left: 30px;
  cursor: pointer;
}
.navActive {
  color: red;
}
.demoItem {
  width: 100%;
  height: 600px;
  font-size: 60px;
  color: #fff;
  text-align: center;
  padding: 60px 0 0 0;
}
.demoItem0{
  background: gold;
}
.demoItem1 {
  background: red;
}
.demoItem2 {
  background: chartreuse;
}
.demoItem3 {
  background: cornflowerblue;
}
.demoItem4 {
  background: cyan;
}
.demoItem5 {
  background: darkmagenta;
}
</style>

效果图：