Vue Scroll to anchor between components

Question

I'm trying to build my portfolio using Vue and Vue Router. What I'm trying to do is have a link in my navbar and when you click it, it will scroll down to that section. I have all my sections in separate components so I can't figure out how to make the scroll behaver function for everything. I have one Home.vue, and that component is the main component and all other components are included inside Home.vue.

Home.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,
},

};

fotiecodes fotiecodes · Accepted Answer · 2021-02-20T22:06:48

I just found a solution to this. in my Navbar i have an anchor tag <a href="#portfolio"><v-btn depressed plain text color="white"> Portfolio </v-btn></a> that points to the specific id in that component I want to move to <div id="portfolio"></div>. You can also make is scroll smoothly with document.querySelector(element).scrollIntoView({ behavior: "smooth" });

Vue Scroll to anchor between components

1 Answers