divの高さのため、ページが先頭から始まらない

Question

現在、Vuejsと連携して他のページにルーティングしています。写真へのリンクについては、画面全体をカバーするメインカバー写真が欲しいです。

<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; 
} 

は、これは、ページ私がそれを望むように表示しますが、私は以前にスクロールダウンしているページからこのページにルーティングされていたときに問題が発生します。ページの先頭から始めるのではなく、カバー画像の途中から始まります。私は問題が高さと関係があると信じています：100vh。それをposition：absoluteと100％の幅で置き換えると、ページは先頭から始まるからです。しかし、私は絶対的な位置付けを控えたいが、これがなぜ起こっているかを理解するのに十分なCSSは分かっていない。

Answer 1

感謝を。

問題はVuejsとは無関係であることが判明しました。 Material Design Liteを使用していたことは言及していませんでした。なぜなら、それが原因ではないと思っていたからです。 MDLによって提供される.mdl-layout__contentクラスではなく、ウィンドウオブジェクトをスクロールしなくなりました。これは、ウィンドウに関するすべてのスクロールプロパティが0を返していた理由です。

scrollTopを強制するために私のルートにウォッチメソッドを設定するだけです。

watch: { 
$route() { 
    document.getElementsByClassName('mdl-layout').scrollTop = 0; 
} 
} 

Answer 2

それはおそらく同様にあなたのvue-router設定のscrollBehaviourに関連することができ、設定にscrollBehaviour次追加しよう：提案のため

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 } 
    ] 
})