How not to scroll down a page after a route change in Nuxt?

ghz 1years ago ⋅ 1751 views

Question

I have Nuxt project. When I change the route from http://localhost:3000/catalog/postery to http://localhost:3000/catalog/postery/all?photos%5B%5D=262 my page is scrolled up to the top, and only after my route is changing

My file scrollBehavior.js:

export default async function (to, from, savedPosition) {
  
  if (
    (to.path.indexOf("/catalog/") !== -1 &&
      to.path.indexOf("/all") === -1 &&
      Object.keys(to.query).length > 0) || 
    (to.path.indexOf("/search") !== -1 && Object.keys(to.query).length > 0) || 
    (to.name === "product-type-id" && Object.keys(to.query).length > 0) || 
    (from.name === "product-type-id" &&
      to.name === "product-type-id" &&
      to.params.type != from.params.type) 
  ) {
    return;
  }

  if (to.path.indexOf("/catalog/") !== -1 && savedPosition != null) {
    return { x: 0, y: savedPosition.y };
  }

  return { x: 0, y: 0 };
}

How I can prevent scroll up before changing route?

Answer

So, you do want to:

  • click on a link
  • start to render the page
  • scroll to top

From the Vue router [documentation](https://router.vuejs.org/guide/advanced/scroll- behavior.html#async-scrolling), it looks like you can use this kind of code

/app/router.scrollBehavior.js

export default function () {
  return { x: 0, y: 0, behavior: 'smooth' }
}

You could maybe also make it conditional or with a setTimeout like this

export default function (to, from, savedPosition) {
  if (to.path === '/my-cool-path') {
    return { x: 0, y: 0, behavior: 'smooth' }
  }
}



export default function (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0, behavior: 'smooth' })
    }, 2000)
  })
}

This answer using vue- scrollto can also maybe help.

Last resort would be to use some transitions to hide the ugly jitter/loading, this can actually be pretty sexy.

#vue.js