vue-router transitions with slide not scrolling to the top

Viewed 468

I use transitions in vue-router and it slides nice, but I would like to see the coming page from the top, instead, I need to scroll the new page manually to the top and this is not ok.

So I added the option scroll-behavior which should help me:

When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. vue-router allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation.

Here my configuration:

Router

const routers = [...]

const router = new VueRouter({
  routes: routes,
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
     if (savedPosition) {
         //return savedPosition
         return { x: 0, y: 0 } // just for debugging
     } else {
         return { x: 0, y: 0 }
     }
  }
});

App.vue

<template>
<div class="home">
    <header-comp></header-comp>
    <main>
        <transition  name="slide"
                     enter-active-class="animated slideInLeft faster"
                     leave-active-class="animated slideOutRight faster">
            <router-view></router-view>
        </transition>
       </main>
      <footer-comp></footer-comp>
   </div>
</template>
0 Answers
Related