When route change to next Component, don't scroll to the top automatically

user_4288946 0
Viewed 5913

In my Vue/Vuetify single page app, when I scroll down a page and click the link at the bottom of the page, it does change the route and takes me to the next page but it doesn't scroll to the top of the next page/Component.

As a result, if the first page is lengthy and 2nd page has few contents, it gives an impression that the 2nd page lacks the contents. Since the contents are visible only if user scroll to the top of the page.

Page 01 - I'm in the middle of a long list, just a example

enter image description here

Page 02 - The next Component loads at the middle

enter image description here

vuejs2 vue-component vuetify.js
1 Answers

You can use vue-router's scrollBehavior method to change the scroll position on page navigation. Instead of created () { window.scrollTo(0, 0) } you should use: 

new VueRouter ({
  routes: [...],
  scrollBehavior () {
    return { x: 0, y: 0 }
  }
})

See more examples on vue-router's documentation:
https://router.vuejs.org/guide/advanced/scroll-behavior.html

user_20747360
Related