router.beforeEach not scrolling to the top of the window after route changes...

[robmpreston]

Another dumb one I’m sure… backend guys doing frontend… who knew it was a bad idea?!

In router.js I have:
let Router = new VueRouter()

Router.map(routes)

Router.beforeEach(function (transition) {
window.scrollTo(0, 0)
transition.next()
})

When I change routes, the window retains its position (i.e. if im scrolled down far on one page, I am then scrolled down far on the next page when I switch routes)

[robmpreston]

wtf? i was in the help forum when i posted this. LOL sorry

[rstoenescu]

Haven’t figured out how to move this to “Help” category without tampering with the DB which I’d avoid.
Anyway, instead of window.scrollTo(0, 0) try document.body.scrollTop = document.documentElement.scrollTop = 0.

This will not work with Layouts, so let me know if this is the case as it deserves a more detailed answer.

[robmpreston]

That didnt seem to work either. No scrolling at all, stays in the same place.

Definitely hitting the function, and yeah its inside of a quasar-layout

[rstoenescu]

For whomever asks what happened with this issue, well it has been solved outside of the forum through email. There were CSS hacks in Robert’s code that broke the layout.

[rstoenescu]

Use Vue Router 3.0 and add scrollBehavior: () => ({ y: 0 }) to the new Router definition.

[terumi]

If you are on cordova, you can add a setTimeOut to, say 10 ms, because the new route hasn’t been loaded already. After the 10ms expiry the screen will jump to the desired position.