Within my Nuxt page, I have implemented functionality to scroll to the top with every router change, as defined in the nuxt.config.js file:
scrollBehavior (to, from, savedPosition) {
return ({ x: 0, y: 0 })
}
However, there is a unique navigation link labeled "Contact" that does not direct users to a separate contact page. Instead, it should navigate to the footer section where the contact information is displayed on every page. To achieve this, I added a standard anchor link to target the #contact section within the footer:
<a class="Submenu__link Submenu__link--contact" href="#contact">
Contact
</a>
Unfortunately, clicking this special link triggers a route change, causing the page to scroll back to the top. In an attempt to resolve this issue, I tried creating a function to set the scrollTop property. However, this resulted in a flickering effect where the page would briefly scroll down before snapping back to the top:
<li class="Submenu__item">
<a @click="closeNavAndScroll" class="Submenu__link Submenu__link--contact" href="#contact">
Contact
</a>
</li>
I also defined a method for handling the click event (which successfully closes the navigation menu):
closeNavAndScroll () {
this.closeNavMenu()
window.scrollTop(400)
}
Upon further research, I visited the following link for more information: https://nuxtjs.org/api/configuration-router#scrollBehavior
From what I gathered, the scrollBehavior configuration applies to all routes, and there doesn't seem to be a specific solution for preserving scroll position when navigating to anchors like #contact. Any suggestions or guidance on how to address this issue would be greatly appreciated.
Thank you!
Cheers