Vue 滚动到组件之间的锚点答案

【问题标题】：Vue Scroll to anchor between componentsVue 滚动到组件之间的锚点
【发布时间】：2021-05-23 13:58:37
【问题描述】：

我正在尝试使用 Vue 和 Vue Router 构建我的产品组合。我想要做的是在我的导航栏中有一个链接，当你点击它时，它会向下滚动到该部分。我的所有部分都在单独的组件中，所以我不知道如何使滚动行为器功能适用于所有内容。我有一个 Home.vue，该组件是主要组件，所有其他组件都包含在 Home.vue 中。

主页.vue

<template>
 <div class="home">
  <HeaderSection />
  <AboutSection />
  <SkillsSection />
  <TimelineSection />
  <PortfolioSection />
  <TestimonialsSection />
  <ContactSection />
 </div>
</template>

<script>
// @ is an alias to /src
import HeaderSection from "@/components/HeaderSection.vue";
import AboutSection from "@/components/AboutSection.vue";
import SkillsSection from "@/components/SkillsSection.vue";
import TimelineSection from "@/components/TimelineSection.vue";
import PortfolioSection from "@/components/PortfolioSection.vue";
import TestimonialsSection from "@/components/TestimonialsSection.vue";
import ContactSection from "@/components/ContactSection.vue";

export default {
name: "Home",
components: {
  HeaderSection,
  AboutSection,
  SkillsSection,
  TimelineSection,
  PortfolioSection,
  TestimonialsSection,
  ContactSection,
},

};

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

我刚刚找到了解决方案。在我的Navbar 中，我有一个锚标记<a href="#portfolio"><v-btn depressed plain text color="white"> Portfolio </v-btn></a>，它指向我想要移动到<div id="portfolio"></div> 的那个组件中的特定ID。您还可以使用 document.querySelector(element).scrollIntoView({ behavior: "smooth" }); 平滑滚动

【讨论】：