Reset page scroll position to top when navigate (in tab view)

When I navigate to different routes in ion-tabs in Ionic Vue, the scroll positions for the pages are preserved from the previous times I viewed them. Instead I’d like pages to automatically be scrolled to the top when navigated to.

I’m using the default tabs starter template and have tried modifying router/index.ts as instructed in the Vue Router documentation to no success.

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior() {
    // always scroll to top
    return { top: 0 }
  },
})

… and with the following quick edit to ExploreContainer.vue to make the page scrollable:

#container {
  text-align: center;
  height: 150vh;
}

Much appreciation for any help!

1 post - 1 participant

Read full topic