さまざまな章 (たとえば 5 章) がある本があるとします。完全な書籍は、5 つの章すべてを含む 1 つの HTML ページに含まれています。各チャプターはいくつかの html コンテンツであり、チャプターと呼ばれるクラス名を持つ div 内に存在します。Chapter 1、Chapter 2 .....、Chapter 5 のタグが付いた 5 つのページのそれぞれに、任意のダミー HTML コンテンツを使用できます。
ページが開くと、最初の章がユーザーに表示されます。見出しに第1章があります。単一の章はウィンドウの高さよりも大きいため、ユーザーはスクロールしてこの章を読むことができます。しかし、ユーザーが章の終わりに到達すると、ユーザーは次の章を表示したり、スクロールしたりすることができなくなります。
ユーザーが章の最後にいるとき、右下に次の章に進むというボタンが表示されます。Imp:- このボタンはチャプター HTML の一部にすることはできません。js を介してチャプターの最後にプログラムで生成する必要があります。
ユーザーがこのボタンをクリックすると、次の章 (この場合は第 2 章) が自動的に下から上にスクロールし、最初のページがウィンドウの外に押し出されます。したがって、画面全体は、上のチャプター 1 を押して、アニメーションで表示されるチャプター 2 で覆われている必要があります。
そのため、ユーザーは一度に上下にスクロールして 1 つのチャプターしか見ることができません。次の章または前の章にアクセスするには、ボタンをクリックする必要があります。
同様に、チャプター 2 の場合、ページの上部にチャプター 1 に移動するためのボタンがあり、チャプター 1 が上部から表示され、チャプター 2 がウィンドウの外に完全に押し出されます。また、第 2 章では、ページの下部にボタンがあり、クリックすると同様のアニメーション形式で第 3 章に移動します。
これは、ユーザーが本を読んでいるときに行う一種の対話です。