Page doesn't start at the top due to height of div - html

Question

I am currently working with Vuejs and routing to other pages. For my link to photos, I would like a main cover photo that covers the entire screen.
<template>
<div id="album-container">
<div class="cover-image"></div>
<section class='intro'>Lorem </section>
<div class="image-flex-wrap">
<div class="image-cell" v-for="image in images">
<img :src="image">
</div>
</div>
</div>
</template>
.cover-image {
background: url('my photo') #fff no-repeat center center;
background-size: cover;
height: 100vh;
}
This displays the page the way I want it, but the problem arises when I am routed to this page from a page where I have previously scrolled down. Instead of starting at the top of the page, it begins around the middle of my cover-image div. I believe the problem has something to do with the height: 100vh because if I replace it with position: absolute and a width of 100%, then the page will start at the top. However, I would like to refrain from using absolute positioning but don't know enough css to understand why this is occurring.

Answer 1

Thanks for the suggestions.
The issue turned out to be unrelated to Vuejs. I had failed to mention I was using Material Design Lite since I didn't expect it to be the cause but unfortunately it was. Due to the way it works, you no longer scroll on the window object by rather the .mdl-layout__content class supplied by MDL. This was why all scroll properties relating to window was returning 0.
I simply set up a watch method on my routes to force scrollTop.
watch: {
$route() {
document.getElementsByClassName('mdl-layout').scrollTop = 0;
}
}

Answer 2

It can probably be related to scrollBehaviour of your vue-router config as well, try to add following scrollBehaviour in the config:
export default new Router({
mode: 'history',
scrollBehavior: (to, from, savedPosition) => {
if (to.hash) {
return {selector: to.hash}
} else {
return {x: 0, y: 0}
}
},
routes: [
{ path: '/', component: landingView },
....
....
{ path: '/healthcheck', name: 'healthcheck', component: healthCheckView }
]
})