如何在Vue项目中实现一个锚点定位功能

本篇文章为大家展示了如何在Vue项目中实现一个锚点定位功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

<template>
<div class="score-preview-container">
 <div class="content-box">
 <div class="content-page-box">
  <GlobalAnalysis :id="#anchor-0" />
  <ErrorMerge :id="#anchor-1" />
  <DoExercise :id="#anchor-2" />
 </div>
 <div class="nav-button-box">
  <span class="nav-button-fix">
  <div class="nav-button" v-for="(item,index) in buttonArr" :key="index" :class="{active : activeBtn == index}" @click="goAnchor('#anchor-'+index,index)">{{item}}</div>
  </span>
 </div>
 </div>
</div>
</template>

<script>
import { mapActions } from "vuex";
import GlobalAnalysis from "./components/GlobalAnalysis.vue";
import ErrorMerge from "./components/ErrorMerge.vue";
import DoExercise from "./components/DoExercise.vue";
export default {
 name: "score-preview",
 components: { GlobalAnalysis, ErrorMerge, DoExercise },
 data() {
 return {
  buttonArr: ["整体分析", "错题整理", "提分训练"],
  activeBtn: 0
 };
 },
 mounted() {
 this.dataInit();
 },
 methods: {
 ...mapActions("v2-score-preview", [
  "fetchClassScoreData",
  "fetchPersonalReportData",
  "fetchErrorQuestionData",
  "fetchExerciseData"
 ]),
 //初始化
 dataInit() {
  this.fetchClassScoreData();
  this.fetchPersonalReportData();
  this.fetchErrorQuestionData();
  this.fetchExerciseData();
 },
 //锚点跳转
 goAnchor(selector, index) {
  this.activeBtn = index;
  document.querySelector("#app-root").scrollTop = this.$el.querySelector(selector).offsetTop;
 }
 }
};
</script>

另外，参考页面内锚点定位及跳转方法总结文章中的第四种方法，发现使用scrollIntoView()方法也能实现锚点定位的效果。

//锚点跳转
goAnchor(selector, index) {
 this.activeBtn = index;
 this.$el.querySelector(selector).scrollIntoView()
}

上述内容就是如何在Vue项目中实现一个锚点定位功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。