scrollBehavior is not work

  • I want page scroll to top when route navigations.
    And I set quasar config like said, but still not work for me

    code is very simple

    let router = new VueRouter({
      * NOTE! VueRouter "history" mode DOESN'T works for Cordova builds,
      * it is only to be used only for websites.
      * If you decide to go with "history" mode, please also open /config/index.js
      * and set "build.publicPath" to something other than an empty string.
      * Example: '/' instead of current ''
      * If switching back to default "hash" mode, don't forget to set the
      * build publicPath back to '' so Cordova builds work again.
      mode: 'history',
      scrollBehavior: () => ({ x: 0, y: 0 }),

  • Admin

    It depends on whether you use Layout or not. scrollBehavior should look like this:

    scrollBehavior () {
       const layout = document.getElementsByClassName('layout-view')
       if (layout.length) {
          layout.scrollTop = 0
       else {
          return { x: 0, y: 0 }

    In future v0.14 it will work simply with scrollBehavior: () => ({ x: 0, y: 0 }).

    Always check generated HTML markup (along with its associated CSS) to see what’s going on. Layout has lots of tricks and scroll does not occur on “body” element as expected by the scrollBehavior method.

  • @rstoenescu just a little modify: change layout.scrollTop = 0 to layout[0].scrollTop = 0 then it work for me.
    thank you.

  • Admin

    yes, right.

  • What is the proper way to handle this in hash mode for cordova?

  • I ended up using window.scrollTo(0, 0) in the router afterEach for cordova, So far so good.

Log in to reply