vue 实现描点定位

第一种
<template>
  <div>
    <button @click="scrollToAnchor('anchor1')">Go to Anchor 1</button>
    <button @click="scrollToAnchor('anchor2')">Go to Anchor 2</button>
    <div id="anchor1">Anchor 1</div>
    <div id="anchor2">Anchor 2</div>
  </div>
</template>
 
<script>
export default {
  methods: {
    scrollToAnchor(anchor) {
      const el = document.getElementById(anchor);
      if (el) {
        el.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }
}
</script>

第二种

template>
  <div>
    <a href="#anchor1">Go to Anchor 1</a>
    <a href="#anchor2">Go to Anchor 2</a>
    <div id="anchor1">Anchor 1</div>
    <div id="anchor2">Anchor 2</div>
  </div>
</template>

第三种

第一步：下载vue-scrollto插件
第二步引入：
import VueScrollTo from "vue-scrollto";

Vue.use(VueScrollTo);
第三步使用：
<a vue-scroll-to="'#anchor1'">Go to Anchor 1</a>
<div id="anchor1">Anchor 2</div>




第四种

  <div id="anchor1">Anchor 1</div>
    <div id="anchor2">Anchor 2</div>

<router-link to="anchor1">Go to Section 1</router-link>
<router-link to="anchor1">Go to Section 2</router-link>