https://codesandbox.io/s/y0lx60z9w1
Page should scroll to top
Scroll is not reset
I think the default behaviour should be that the scroll resets to top when navigating from a page with no children to a page with children.
For my project, I've solved by adding an extra condition from.matched.length < 2 && to.matched.length > 1 to the default scroll behaviour, so it looks like this:
// if the returned position is falsy or an empty object,
// will retain current scroll position.
let position = false
// if no children detected and scrollToTop is not explicitly disabled
// or children are detected but coming from another page
if (
(to.matched.length < 2 ||
(from.matched.length < 2 && to.matched.length > 1)) &&
to.matched.every(
r => r.components.default.options.scrollToTop !== false
)
) {
// scroll to the top of the page
position = { x: 0, y: 0 }
} else if (
to.matched.some(r => r.components.default.options.scrollToTop)
) {
// if one of the children has scrollToTop option set to true
position = { x: 0, y: 0 }
}
If you think that makes sense, I can open a PR with this solution. Of course, this doesn't cover other cases, such as navigating between different pages which have children (in which case we could check if the path of the parent is different?), but I understand the complexity of covering all the cases can become a bit unmanageable, so maybe this is something people should deal with in their own project.
Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:
Issues that are labeled as 馃晲Pending will not be automatically marked as stale.