jquery - jQuery scrollTo 動作しない本体、html セット 100%

Question

この質問に関して、SOユーザーから素晴らしい助けがありました：

ウィンドウスクロール上のjQueryは、背景画像の位置をアニメーション化します

ここでわかるように、ユーザーがページをスクロールするときに、div の背景画像を段階的にスクロールしたいと考えていました。作業バージョンについては、これを参照してください。

http://jsfiddle.net/nicklansdell/HFxVj/4/

与えられた答えは完全に機能します。ただし、ブラウザーのスクロールバーでページをスクロールできるようにするだけでなく、アンカーがクリックされたときにページを divs ハッシュ位置にスクロールする追加機能も含めたいと考えています。これを実現するために scrollTo プラグインを使用していますが、これは次の CSS を含めるまでは完全に機能していました。

body, html {
    height: 100%;
    min-height: 100%;
}

残念ながら、これを含めるとページのscrollToアニメーションは機能しませんが、これを含めると背景画像の位置アニメーションが機能します。どちらか一方のようですが、もちろん両方が必要です:-)ここで回避策を提案できますか? よろしくお願いします。

編集*

問題を少し絞り込みました。問題は本体とは関係なく、html が高さ 100% に設定されていることです。#page div に物理的な高さを与えることです。背景画像のスクロールには 100% の高さが必要ですが、scrollTo が機能するために高さを指定する必要はありません。私の JSFiddle http://jsfiddle.net/nicklansdell/HFxVj/4/更新を見て、#page スタイルをいじって、私の言いたいことを確認してください。

Answer 1

ロングショット - css を body または html の両方ではなく、どちらかに適用しようとしましたか?

本体のみ:

body { 
height: 100%;
min-height: 100%;
}

html のみ:

html { 
height: 100%;
min-height: 100%;
}

Answer 2

html ではなく body にのみ高さを適用します。