假设有一本书中有各种章节（比如说5）。完整的书籍出现在一个单独的html页面中，其中包含5个章节。 每个章节都是一些html内容，并且存在于一个名为chapter的类名称的div中。您可以为包含标签的五个页面中的每个页面添加任何虚拟HTML内容，如第1章，第2章和第5章所述。
现在页面打开时，第一章会显示给用户。其中标题为第1章。单个章节大于窗口的高度，因此用户可以滚动阅读本章。但是一旦用户到达章节末尾，用户就无法看到或滚动到下一章节。
当用户在本章末尾时，他会看到右下方的按钮，然后转到下一章。 Imp： - 此按钮不能作为HTML章节的一部分，必须通过js以编程方式在本章末尾生成。
当此人点击此按钮时，下一章（本例中为第2章）应自动从底部向上滚动，直到顶部将第一页推出窗口。因此，按照上面的第1章，整个屏幕应该被动画显示的第2章所覆盖。
因此，在给定时间，用户只能通过向上或向下滚动来查看一个章节。他必须单击按钮才能访问下一章或上一章。
类似于第2章，页面顶部会有一个按钮转到第1章，其中第1章将从顶部完全推出第2章，完全不在窗口之外。对于第2章，页面底部还会有一个按钮，单击哪个用户将以相似的动画格式进入第3章。
这是用户在阅读本书时会有的一种互动。