Scroll to a specific element in Vue

Question

How can i make this Scroll to a specific Element Using html in Vue when the ID and element i want to click on are in different component?

<template>
  <div class="container">

    <div class="section">
    <Bio/> <--------------------- inside of this is the text i want to click on
  </div>
    <div class="section">
    <About/>
  </div>
    <div class="section">
    <Gallery/>
  </div>
    <div class="section">
    <Counter/>
  </div>
  <div class="section"> 
    <Services/> <----------------- Section i want to scroll in after click
  </div>
    <div class="section">
    <Clients/>
  </div>
    <div class="section">
    <Clientslogo/>
    </div>
    
  </div>
</template>

score 0 · Answer 1 · answered Oct 28 '22 at 22:29

As explained here, this is how you can achieve such thing

<template>
  <div class="container">
    <router-link :to="{ hash: '#services' }">Scroll to Services</router-link>
    <div class="section">
      <Bio id="bio" /> <!-- inside of this is the text I want to click on -->
    </div>

    <div class="section">
      <About/>
    </div>

    <div class="section">
      <Gallery/>
    </div>

    <div class="section">
      <Counter/>
    </div>

    <router-link :to="{ hash: '#bio' }">Scroll to Bio</router-link>
    <div class="section"> 
      <Services id="services" /> <!-- Section I want to scroll in after click -->
    </div>

    <div class="section">
      <Clients/>
    </div>

    <div class="section">
      <Clientslogo/>
    </div>
  </div>
</template>

Scroll to a specific element in Vue

1 Answers1