1

簡単な 2 ページのレイアウトを作成したいのですが、作成中にいくつか問題が発生しました。

どちらのページも、ページの幅と高さをすべて使用します。2 番目のページは存在しますが、最初のページの上 (垂直方向) に画面外に隠されています。ボタンをクリックすると、最初のページが下に移動し、2 ページ目が上から下に移動します。

私の最初の試みには、2 つの絶対配置ボックスが含まれていました。すなわち

#page1, #page2 { position: absolute; width: 100%; height: 100%; }
#page2 { margin-top: -100%; }

構造的には、これは Chrome で機能します。#page2 は画面の外にあり、page1 は表示されています。残念ながら、他のユーザーにとってはあまりうまくいきません。

簡単なjqueryでボタンをクリックすると、cssが次のようにアニメーション化されます。

$('#learnmore').click(function(){

    $('#page1').animate({'margin-top':'100%'},500);
    $('#page2').animate({'margin-top':'0'},500);
});

したがって、基本的に、ページ 1 は 100% の余白を追加し、ページ 2 の余白は削除されます。これは私のコンピューターでは問題なく機能しましたが、他のユーザーから問題が報告されました。私のレイアウトの構造的な問題に違いないと思います。

さまざまなブラウザーが幅: 100% と高さ: 100% を好まず、予期しない結果を生み出しているようです。これは本当ですか？

2 番目のページが画面外に隠され、クリックすると上から下にスクロールするようにするには、これを実現するためのより良い方法は何でしょうか? 目的は、ロード時にページ 1 を画面にスクロールバーを表示せずに表示することです。その後、ページ 2 がダウンすると、ユーザーは必要に応じてスクロールして戻ることができます。

編集:これは、私が別の構造を使用して行った方法の JSfiddleです。ブラウザでこれに問題はありますか? これを改善できますか？

ご協力いただきありがとうございます。

4

1 に答える 1

1

margin-top に 100% を使用する代わりに、$(window).height() の使用を検討してください。最初の画面の高さが 100% であることが確実な場合は、同じ結果が得られ、すべてのブラウザーで機能します。

$('#learnmore').click(function(){

    $('#page1').animate({'margin-top':$(window).height()},500);
    $('#page2').animate({'margin-top':'0'},500);
});

また、document.ready() で page1 の幅と高さを 100% に設定する必要があります。

$('#page1').css("height", $(window).height() + "px");

Learnmore.click() で #page2 に対して同じことを行います。

于 2012-07-23T12:36:56.973 に答える