Prevent page movement on tab change

Just wondering if there is a way to prevent a page from jumping back to the top when changing tabs.

I am using Vuetify and currently when user clicks a tab a #{some-tab} gets added to to URL only for the purpose of being able to keep it in browser history and ability to bookmark it.

some thing like site.com/main/sub/#some-sub-section

The tabs are midway down the page so when any tab is clicked it jumps back to the top of the page forcing the user to scroll back to where they were on the page where the tabs are located.

I am assuming its because of the hash getting added to the URL since if I remove it there is no jumping, but then I lose the history and bookmarking capabilities.

Is there a way to get both? History and bookmarking with no jumping?

I am pretty sure its the :to="i.hash" causing the issue but I could not find any doc on changing the hash programatically

Here is tab code:

tabs object used to build tabs:

tabs: [
        {
          name: 'About',
          component: 'AboutMgt',
          title: 'Manage your info',
          hash: '#about'
        },
.....

tab builder

<!-- START TAB NAV -->
    <v-tabs
      show-arrows
      :background-color="themeBackground"
      class="mt-6 mb-12"
    >
      <v-tabs-slider color="pink" size="2"></v-tabs-slider>
      <v-tab
        v-for="(i, index) in tabs"
        :key="index"
        active-class="heading--text"
        class="fs-12 fw-6"
        :to="i.hash"
      >
        {{ i.name }}
      </v-tab>
    </v-tabs>
    <!-- END TAB NAV -->

Thanks

Dave