Vue.js scroll to top of page for same route

You can't do this through vue-router, but you can add a scroll-to-top method to every router-link.

Just create a method like this:

methods: { 
  scrollToTop() {
    window.scrollTo(0,0);
  }
}

Add it to the link:

<router-link @click.native="$scrollToTop">

If you want to use it outside of your footer too, it's better to add it to the Vue prototype

Vue.prototype.$scrollToTop = () => window.scrollTo(0,0)

It's not a 100% solution but it's the simplest one


I couldn't get any of the above solutions working, and it was really frustrating.

What ended up working for me was the below:

    const router = new Router({
        mode: 'history',
        routes: [...],
        scrollBehavior() {
            document.getElementById('app').scrollIntoView({ behavior: 'smooth' });
        }
    })

I mount my VueJs app to #app so I can be certain it is present and is available for selection.