Home » vue » Scrollbehavior not working with nuxt-link

Scrollbehavior not working with nuxt-link

Posted by: admin November 26, 2021 Leave a comment

Questions:

I would like my app to keep the same scrolling position when navigating back to one of my routes. It is working if I navigate back using the back button of my browser but when I click on a link (created with nuxt-link) the scroll position resets to 0 when navigating to my route.

I tried replacing the scrollBehavior function in nuxt.config.js with my own. The function is called but the savedPosition parameter is null so it’s obviously the reason why the scroll position is reset. Again, if I use the back button of my browser instead of clicking a link from an other route, then there is no problem, the savedPosition parameter is set to its expected value and the scrolling happens. I don’t understand why it doesn’t work when navigating with a link and what I can do to solve this. Any help would be appreciated.

Answers:

I believe the reason this is happening is that nuxt-link is pushing a new page onto the back stack.

With that in mind, scrollBehaviour is being called with a null savedPosition parameter because this is a brand new page. This is analogous to calling router.push() when doing programmatic navigation.

I wasn’t able to find any method of emulating the back button behaviour strictly using nuxt-link, but it’s simple to implement using programmatic navigation:

// go backward one page
router.go(-1)