Nuxt.js: Scroll not resetting when navigating to a page with children

Created on 25 Mar 2019  路  1Comment  路  Source: nuxt/nuxt.js

Version

v2.5.1

Reproduction link

https://codesandbox.io/s/y0lx60z9w1

Steps to reproduce

What is expected ?

Page should scroll to top

What is actually happening?

Scroll is not reset

Additional comments?

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.

This bug report is available on Nuxt community (#c8920)
bug-report stale

>All comments

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:

  1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
  2. Comment the steps to reproduce it

Issues that are labeled as 馃晲Pending will not be automatically marked as stale.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

danieloprado picture danieloprado  路  3Comments

gary149 picture gary149  路  3Comments

lazycrazy picture lazycrazy  路  3Comments

uptownhr picture uptownhr  路  3Comments

pehbehbeh picture pehbehbeh  路  3Comments