Scroll to top on route change – Vue.js

If you want to scroll the page to the top once you change your route using vue-router there's two options.

Both use the Navigation Guards

Globally

This will be have an effect on every single view change:

const router = new Router({ ... });

router.afterEach(() => {
  window.scrollTo(0, 0);
});

export default router;Code language: JavaScript (javascript)

View specific

You can use the same snippet in the mounted function like this:

mounted () {
  window.scrollTo(0, 0);
}Code language: JavaScript (javascript)