[Vuejs]-Scroll to an element given in the location hash, when said element is loaded asynchronously on page load

by

0👍

I solved this myself, I used jquery for the scroll animation because, easy.

if(window.location.hash && !this.hasScrolled){

    var hash = location.hash.substring(1);

    $('html, body').animate({scrollTop: this.$refs[hash][0].offsetTop -200} ,800);

    this.hasScrolled = true;
 }

This had to happen in the updated() hook on the component as this is the point when the element’s offset is known. I added a hasScrolled property (initially set to false) so I can make sure it only does the scroll on initial page load.

Leave a comment