ScrollIntoView Vue

<template>
  <v-app>
    <v-container>
      <!-- Navigation Links -->
      <v-toolbar>
        <v-toolbar-items>
          <v-btn text @click="scrollTo('section1')">Go to Section 1</v-btn>
          <v-btn text @click="scrollTo('section2')">Go to Section 2</v-btn>
        </v-toolbar-items>
      </v-toolbar>

      <!-- Sections with IDs -->
      <v-section id="section1">
        <v-card>
          <v-card-title>Section 1</v-card-title>
          <v-card-text>
            Content for Section 1
          </v-card-text>
        </v-card>
      </v-section>

      <v-section id="section2">
        <v-card>
          <v-card-title>Section 2</v-card-title>
          <v-card-text>
            Content for Section 2
          </v-card-text>
        </v-card>
      </v-section>
    </v-container>
  </v-app>
</template>

<script>
export default {
  methods: {
    scrollTo(id) {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }
}
</script>

<style>
html {
  scroll-behavior: smooth;
}
</style>