Nuxt.js: Wrong scrollBehavior with nested pages

Created on 17 Sep 2019  路  1Comment  路  Source: nuxt/nuxt.js

Version

v2.9.2

Reproduction link

https://codesandbox.io/s/example-hello-world-84145

Steps to reproduce

  1. Click Check Example
  2. Scroll to page bottom
  3. Click link "Click Me"
  4. Next page won't be scrolled to top - Wrong
  5. Click "Most interesting situation"
  6. You will be navigated to page with other parent page, but still page will not be scrolled to top - Wrong

What is expected ?

Page definitely should be scroll to top if you go to other page

What is actually happening?

Scrolling not happening

Additional comments?

Solution:
Add rule to router.scrollBehavior.js

if (
Pages.length < 2 &&
Pages.every(Page => Page.options.scrollToTop !== false)
) {

..........

} else if(to.name !== from.name) {
position = { x: 0, y: 0 };
}

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

Most helpful comment

The docs explicitly state the original behaviour:

By default, Nuxt.js scrolls to the top when you go to another page, but with children routes, Nuxt.js keeps the scroll position. If you want to tell Nuxt.js to scroll to the top when rendering your child route, set scrollToTop to true:

From: https://nuxtjs.org/api/pages-scrolltotop#the-scrolltotop-property

>All comments

The docs explicitly state the original behaviour:

By default, Nuxt.js scrolls to the top when you go to another page, but with children routes, Nuxt.js keeps the scroll position. If you want to tell Nuxt.js to scroll to the top when rendering your child route, set scrollToTop to true:

From: https://nuxtjs.org/api/pages-scrolltotop#the-scrolltotop-property

Was this page helpful?
0 / 5 - 0 ratings

Related issues

vadimsg picture vadimsg  路  3Comments

gary149 picture gary149  路  3Comments

bimohxh picture bimohxh  路  3Comments

surmon-china picture surmon-china  路  3Comments

pehbehbeh picture pehbehbeh  路  3Comments