Scroll behavior is not working

[SazzadR]

I am using vue-paper-dashboard-pro version 1.1.0. Here I cannot manage to work vue's native scrollBehavior properly. Here is my code in main.js file:

// configure router
const router = new VueRouter({
  routes, // short for routes: routes,
  linkActiveClass: 'active',
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

I have haven't change any other part of template.

[cristijora]

Hi @SazzadR Thanks for posting the issue. scrollBehavior works with history mode only in vue router https://router.vuejs.org/en/advanced/scroll-behavior.html Note: this feature only works if the browser supports history.pushState. So you have to use mode: 'history' in the vue router options in order to make it work

[SazzadR]

I am already using history mode, but it still won't working. Here is my route initialization. My chrome version is Version 66.0.3359.181 (Official Build) (64-bit)

import Vue from 'vue';
import routes from './routes';
import Router from 'vue-router';

Vue.use(Router);

const router = createRouter();

export default router

function createRouter() {
    const router = new Router({
        mode: 'history',
        routes,
        linkActiveClass: 'active'
    });

    return router
}

[cristijora]

Scroll behavior should work in V2 both for history and non history mode now.

scrollBehavior: (to, from, savedPosition) => {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return { x: 0, y: 0 }
    }
  }

If you don't have access to v2, let me know your username from creativetim and I will add it to your account @SazzadR

[phillygogo]

I couldn't get any of the above solutions working, and it was really frustrating.

What ended up working for me was the below:

const router = new Router({
    mode: 'history',
    routes: [...],
    scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    }
})

I mount my VueJs app to #app so i can be certain it is present its available for selection.

[aimroboticsbying]

I use vue-material-dashboard-pro 1.2.0. None of the above solutions work for me? Any update?

[MoWafa]

This should make it work

export default new Router({
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
    // This works only with the history mode
    console.log(to, from, savedPosition)
    return { x: ..., y: ... }
    // Or return the savedPosition
  },
  routes: [ ... ]
})

[alexvenetis]

I can't get the scrollBehavior to work with vue-material either. Not sure why this is closed!

[dragosct]

Hi, @alexvenetis! The solution is here for this issue and is working!

Regards, Dragos

[alexvenetis]

Hi, @alexvenetis! The solution is here for this issue and is working!

Regards, Dragos

I've tried all the solutions here, but nothing seems to work.

I think the problem I am facing is because I am using the vue-material app setup.

The outer app stays at position 0, 0. So, the scrollBehavior setting the app to 0, 0 has no effect. Its the inner app content that is scrolled down and not re-scrolling to the top.

[dragosct]

Hi, @alexvenetis! Unfortunately, here the problem is related to vue paper dashboard pro, not the material dashboard.

Regards, Dragos