Vue.js scroll to top of page for same route

Question

I can set scrolling behaviour to Vue.js Router like this:

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'index',
            component: Main
        },
        {
            path: '/some-path',
            name: 'some-path',
            component: SomePath
        }
    ],
    scrollBehavior() {
        return {x: 0, y: 0}
    }
})

This works perfectly when you click on the link with some page which is not current. When I click on the link which is already rendered, i.e. in the footer, nothing happens. Vue Router assumes there is no state transition. What is the preferred way to scroll up in this case?

Answer 1

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

Answer 2

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.

Answer 3

You could make use of behavior: smooth:

    moveTo () {
      let to = this.moveToDown
        ? this.$refs.description.offsetTop - 60
        : 0

      window.scroll({
        top: to,
        left: 0,
        behavior: 'smooth'
      })

      this.moveToDown = !this.moveToDown
    }