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 mecode 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 }),
-
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
tolayout[0].scrollTop = 0
then it work for me.
thank you. -
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.