No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    scrollBehavior is not work

    Help
    3
    6
    2334
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • bigzhu
      bigzhu last edited by

      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 }),
      
      1 Reply Last reply Reply Quote 0
      • rstoenescu
        rstoenescu Admin last edited by

        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.

        bigzhu 1 Reply Last reply Reply Quote 0
        • bigzhu
          bigzhu @rstoenescu last edited by

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

          1 Reply Last reply Reply Quote 0
          • rstoenescu
            rstoenescu Admin last edited by

            yes, right.

            1 Reply Last reply Reply Quote 0
            • S
              smakinson last edited by

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

              1 Reply Last reply Reply Quote 0
              • S
                smakinson last edited by

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

                1 Reply Last reply Reply Quote 1
                • First post
                  Last post