scrollBehavior is not work



  • I want page scroll to top when route navigations.
    And I set quasar config like http://forum.quasar-framework.org/topic/49/anchor-tags-in-parallax-view 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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.