Vue js mounted scroll to specific div

Question

I found this script and works fine when you click on the button. What i want to achieve is when the page load it automatic scrolls to that specific div.

How can i achieve that?

<button id="goto" @click="goto('porto')">Go to porto</button>

<div class="page" ref="porto">
    Porto page
</div>

methods: {
    goto(refName) {
        var element = this.$refs[refName];
        console.log(element);
        var top = element.offsetTop;
        window.scrollTo(0, top);
    }
},

Answer 1

mounted is called after render, however if we try to scroll immediately on mount, scroll might not work.

a simple setTimeout without a timeout does the trick, this might look ugly, but works like a charm.

mounted() {
 setTimeout(() => {
  scrollToDiv();
 })
}

Answer 2

Perhaps you could use the lifecycle hooks in Vue

so something like a mounted hook:

mounted:{
  this.goto('porto')
}