nuxt: Inconsistent scrollToTop behaviour after update to 1.3.0

This code does not run when a layout is changed. Think this is a bug.

  return new Promise(resolve => {
    // wait for the out transition to complete (if necessary)
    window.$nuxt.$once('triggerScroll', () => {
      // coords will be used if no selector is provided,
      // or if the selector didn't match any element.
      if (to.hash && document.querySelector(to.hash)) {
        // scroll to anchor by returning the selector
        position = { selector: to.hash }
      }
      resolve(position)
    })
  })

i copy default(https://nuxtjs.org/api/configuration-router) to nuxt.config.js i found it ok nuxt1.4.0

router: { scrollBehavior: function (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { let position = {} // 目标页面子组件少于两个 if (to.matched.length < 2) { // 滚动至页面顶部 position = { x: 0, y: 0 } } else if (to.matched.some((r) => r.components.default.options.scrollToTop)) { // 如果目标页面子组件中存在配置了scrollToTop为true position = { x: 0, y: 0 } } // 如果目标页面的url有锚点, 则滚动至锚点所在的位置 if (to.hash) { position = { selector: to.hash } } return position } } }

Still an issue unfortunately, even on nuxt-edge. This is a pretty big bug IMO. Does anyone have a repo with multiple layouts where scroll to top works?

As far as I can see none of the suggested workarounds here allow for page transitions.

I have the same problem, in some route changes the scroll do not move to the top of the page.

The problem in that cases is the “triggerScroll” event in the scrollBehavior method of lib/app/router.js because the event was not triggered.

For now i am using this code in my nuxt.config.js file:

scrollBehavior (to, from, savedPosition) {
      // if the returned position is falsy or an empty object,
      // will retain current scroll position.
      let position = false

      // if no children detected
      if (to.matched.length < 2) {
        // 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 }
      }

      // savedPosition is only available for popstate navigations (back button)
      if (savedPosition) {
        position = savedPosition
      }

      return new Promise(resolve => {
        // wait for the out transition to complete (if necessary)
        // view https://github.com/nuxt/nuxt.js/issues/2738
        /*
        window.$nuxt.$once('triggerScroll', () => {
          // coords will be used if no selector is provided,
          // or if the selector didn't match any element.
          if (to.hash && document.querySelector(to.hash)) {
            // scroll to anchor by returning the selector
            position = { selector: to.hash }
          }
          resolve(position)
        })
        */
        resolve(position)
      })
    }

I’ve been using nuxt Edge and it is an issue usually

@sunlei4076 thanks for sharing. This version of scrollBehavior worked for me too.

nuxt.config.js:

 router: {
    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        let position = {}
        if (to.matched.length < 2) {
          position = { x: 0, y: 0 }
        } else if (to.matched.some(r => r.components.default.options.scrollToTop)) {
          position = { x: 0, y: 0 }
        }
        if (to.hash) {
          position = { selector: to.hash }
        }
        return position
      }
    }
  }

As the majority of the problems of this mega-issue is solved, I’ll close hear and open a specific one for the problem related to the reproduction of @davidpmccormick

interesting, looks fixed for me

I spoke yesterday with @Atinux on this and the real issue is vue-router implementation here.

I think we should close / pause this and reference a bug on their side.

Using :key on top level element in the page component with dynamic routes fixes scrolling to top when route param changes.