假设有一本书有不同的章节（比如 5 章）。完整的书出现在一个包含所有 5 个章节的 html 页面中。每个章节都是一些 html 内容，并存在于一个类名为章节的 div 中。您可以为五个带有标签的页面中的每一个获取任何虚拟 HTML 内容，如第 1 章、第 2 章......和第 5 章。
现在，当页面打开时，第一章会显示给用户。标题中有第 1 章。单个章节大于窗口的高度，因此用户可以滚动阅读本章。但是一旦用户到达该章的末尾，用户就不能看到或滚动到下一章。
当用户在章节结束时，他会在右下角看到一个按钮，表示转到下一章。Imp:- 这个按钮不能是章节 HTML 的一部分，它必须在章节末尾通过 js 以编程方式生成。
当用户单击此按钮时，下一章（在本例中为第 2 章）应自动从底部向上滚动到顶部，将第一页推出窗口。因此，整个屏幕应该被上面的第 1 章动画显示的第 2 章覆盖。
因此，在给定时间，用户只能通过向上或向下滚动来查看一章。他必须单击按钮才能访问下一章或上一章。
同样，对于第 2 章，页面顶部将有一个按钮转到第 1 章，其中第 1 章将从顶部出现，将第 2 章完全向下推到窗口外。对于第 2 章，页面底部也会有一个按钮，点击该按钮，用户将被带到类似动画格式的第 3 章。
这是用户在阅读本书时将进行的一种交互。