当前位置：首页 > VUE

vue实现锚点导航

2026-01-20 13:42:51VUE

使用 `scrollIntoView` 方法

通过 JavaScript 的 scrollIntoView 方法实现锚点导航，适用于 Vue 2 和 Vue 3。

<template>
  <div>
    <button @click="scrollTo('section1')">Section 1</button>
    <button @click="scrollTo('section2')">Section 2</button>

    <div id="section1" class="section">Section 1 Content</div>
    <div id="section2" class="section">Section 2 Content</div>
  </div>
</template>

<script>
export default {
  methods: {
    scrollTo(id) {
      document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
    }
  }
};
</script>

<style>
.section {
  height: 500px;
  margin: 20px 0;
}
</style>

使用 Vue Router 的哈希模式

结合 Vue Router 的哈希模式实现锚点导航，适用于页面内跳转。

<template>
  <div>
    <router-link to="#section1">Section 1</router-link>
    <router-link to="#section2">Section 2</router-link>

    <div id="section1" class="section">Section 1 Content</div>
    <div id="section2" class="section">Section 2 Content</div>
  </div>
</template>

<script>
export default {
  mounted() {
    if (window.location.hash) {
      const id = window.location.hash.substring(1);
      this.scrollTo(id);
    }
  },
  methods: {
    scrollTo(id) {
      document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
    }
  }
};
</script>

使用第三方库 `vue-scrollto`

安装 vue-scrollto 库，提供更灵活的锚点滚动功能。

npm install vue-scrollto

在 Vue 项目中引入并使用：

<template>
  <div>
    <button v-scroll-to="'#section1'">Section 1</button>
    <button v-scroll-to="'#section2'">Section 2</button>

    <div id="section1" class="section">Section 1 Content</div>
    <div id="section2" class="section">Section 2 Content</div>
  </div>
</template>

<script>
import VueScrollTo from 'vue-scrollto';

export default {
  directives: {
    'scroll-to': VueScrollTo
  }
};
</script>

自定义平滑滚动指令

通过自定义指令实现平滑滚动效果，适用于需要高度定制的场景。

vue实现锚点导航

<template>
  <div>
    <button v-smooth-scroll:section1>Section 1</button>
    <button v-smooth-scroll:section2>Section 2</button>

    <div id="section1" class="section">Section 1 Content</div>
    <div id="section2" class="section">Section 2 Content</div>
  </div>
</template>

<script>
export default {
  directives: {
    'smooth-scroll': {
      inserted(el, binding) {
        el.addEventListener('click', () => {
          const target = document.getElementById(binding.arg);
          if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
          }
        });
      }
    }
  }
};
</script>

以上方法均能实现 Vue 中的锚点导航功能，根据项目需求选择合适的方式。

标签: vue