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

  • 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.beforeEach(function (transition) {
    window.scrollTo(0, 0)

    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)

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

  • Admin

    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.

  • 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

  • Admin

    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.

  • Admin

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

  • 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.

Log in to reply