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


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)

About Ricard Torres

Senior Front-end Software Engineer at Netcentric, from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

Add <code> Some Code </code> if you need to.