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);
}
},
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();
})
}
Perhaps you could use the lifecycle hooks in Vue
so something like a mounted hook:
mounted:{
this.goto('porto')
}
I such a case I'm always using the nextTick method.
import { nextTick } from 'vue';
In your mounted method you would simply call:
mounted() {
nextTick(() => this.goto('porto'));
},
