How to navigate to different section in the same page using vuetify?

Question

I tried the HTML way of doing it using anchors:

<ul>
  <li><a href="#dashobard">Dashboard</a></li>
</ul>

And my target is like:

<v-card id="dashboard">
  <v-card-text class="document">
    Contract Details: lorem ipsum ...
  </v-card-text>
</v-card>

But the problem is when I click on Dashboard link it goes to 2 lines after the title (in this case 'Contract Details').

I was wondering if there is a way of doing this using Vuetify. I could not find it in their documentation. I also tried <v-card name="dashboard"> but it was the same results. I am new to Vue and Vuetify, so any help would be appreciated.

Answer 1

I finally figured out what the problem was. Since my navbar was fixed at the top and my content would hide underneath the navbar, all I had to do to use offset: -60 in options and pass it like this:

<li><a @click="$vuetify.goTo('#dashboard',options)">dashboard</a></li>

My navbar was 64px in height.