Full-Stack Vue.js 2 and Laravel 5

Scroll behavior
Another aspect of website navigation that the browser automatically manages is
scroll behavior. For example, if you scroll to the bottom of a page, then navigate
to a new page, the scroll position is reset. But if you return to the previous page,
the scroll position is remembered by the browser, and you're taken back to the
bottom.
The browser can't do this when we've hijacked navigation with Vue Router. So,
when you scroll to the bottom of the Vuebnb home page and click a listing in
Cuba, let's say, the scroll position is unchanged when the listing page component
is loaded. This feels really unnatural to the user, who would expect to be taken to
the top of the new page:
Figure 7.17. Scroll position issue after navigating with Vue Router Vue Router has a scrollbehavior
method that allows you to adjust where the page is scrolled when you change routes by simply defining the
x and y positions of the horizontal and vertical scroll bars. To keep it simple, and yet to still keep the UX
natural, let's make it so we are always at the top of the page when a new page is loaded.
resources/assets/js/router.js: export default new VueRouter({ mode: 'history',
routes: [ ... ], scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } });