Vue Router Scroll Up to Anchor - vuejs3

Question

I have followed a few post on SO on how to scroll to anchor and have the following code added:
import { route } from 'quasar/wrappers'
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './routes'
/*
* If not building with SSR mode, you can
* directly export the Router instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Router instance.
*/
export default route(function (/* { store, ssrContext } */) {
const createHistory = process.env.SERVER
? createMemoryHistory
: (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
const Router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (to && to.hash) {
return {
el: to.hash,
top: 75, // avoid blocking the view when having fixed components
behavior: 'smooth'
};
} else if (savedPosition) {
return savedPosition;
} else {
return { top: 75 };
}
},
routes,
// Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
history: createWebHistory(process.env.VUE_ROUTER_BASE)
})
return Router
})
This works if you are already above the anchor and it will scroll down nice and clean to the anchor. However, say you are past the anchor and you click my navigation button it will not scroll up but instead resets to the top of the page then scrolls down. Just does not feel fluent. So can Vue-Router not scroll up to the anchor? My sidebar menu with router-links is as follows:
<template>
<div class="navigation-links q-pa-lg">
<q-list padding>
<q-item clickable v-ripple class="q-pa-md q-ma-md menu-item"
:to="{name: 'Home', hash: '#Home'}"
:active="(route.name === 'Home' && route.hash === '#Home') || (route.name === 'Home' && route.hash === '')"
active-class="active-menu-item">
<q-item-section avatar>
<q-icon name="fa-solid fa-house" style="font-size:1.25rem"/>
</q-item-section>
<q-item-section>
HOME
</q-item-section>
</q-item>
<q-item clickable v-ripple class="q-pa-md q-ma-md menu-item"
:to="{name: 'Home', hash: '#Services'}"
:active="route.name === 'Home' && route.hash === '#Services'"
active-class="active-menu-item">
<q-item-section avatar>
<q-icon name="fa-solid fa-shirt" style="font-size:1.25rem"/>
</q-item-section>
<q-item-section>
SERVICES
</q-item-section>
</q-item>
<q-item clickable v-ripple class="q-pa-md q-ma-md menu-item"
:to="{name: 'Home', hash: '#OurTeam'}"
:active="route.name === 'Home' && route.hash === '#OurTeam'"
active-class="active-menu-item">
<q-item-section avatar>
<q-icon name="fa-solid fa-users" style="font-size:1.25rem"/>
</q-item-section>
<q-item-section>
OUR TEAM
</q-item-section>
</q-item>
<q-item clickable v-ripple class="q-pa-md q-ma-md menu-item" #click="layoutStore.toggleContactUsDrawer">
<q-item-section avatar>
<q-icon name="fa-solid fa-envelope" style="font-size:1.25rem"/>
</q-item-section>
<q-item-section>
CONTACT US
</q-item-section>
</q-item>
</q-list>
</div>
<div class="socialmedia-links q-pa-lg text-center column no-wrap flex-center self" style="">
<div class="row">
<q-btn flat size="sm" color="primary" round icon="fa-brands fa-google" aria-label="google" class="float-right q-ma-sm no-shadow" #click="openInNewTab(companyGoogleLink)"/>
<q-btn flat size="sm" color="primary" round icon="fa-brands fa-facebook-f" aria-label="facebook" class="float-right q-ma-sm no-shadow" #click="openInNewTab(companyFacebookLink)"/>
<q-btn flat size="sm" color="primary" round icon="fa-brands fa-instagram" aria-label="instagram" class="float-right q-ma-sm no-shadow" #click="openInNewTab(companyInstagramLink)"/>
</div>
<h2 class="text-h5 text-weight-bolder q-mb-xs">CONNECT WITH US</h2>
<h6 class="text-subtitle1 text-accent text-weight-normal q-my-none">If you like what you have seen so far we can guarentee you will appreciate our print quality.</h6>
</div>
</template>
<script setup>
import { ref } from 'vue'
import {storeToRefs} from 'pinia'
import {useLayoutStore} from '../stores/layout-store'
import {useCompanyInfoStore} from '../stores/company-info-store'
import {useRoute, useRouter } from 'vue-router'
//store
const layoutStore = useLayoutStore()
const {contactUsDrawer, navigationDrawer} = storeToRefs(layoutStore)
const companyInfoStore = useCompanyInfoStore()
const {companyFacebookLink, companyGoogleLink, companyInstagramLink} = storeToRefs(companyInfoStore)
const searchText = ref('')
const route = useRoute()
const router = useRouter()
//methods
function openInNewTab(url) {
window.open(url, '_blank').focus();
}
</script>
<style lang="scss" scoped>
.block-wrapper{
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
.active-menu-item{
background-color: $background-accent;
color: $primary !important;
}
.menu-item{
letter-spacing: .15rem;
font-weight:500;
border-radius: 7px;
color:$dark
}
</style>