Star LISCENCEMIT

Infinite Scroll Up 'N Down

This is jQuery plugin that makes your website infinite scroll up and down.

Try scroll up and down!

I connected page 5 to page 1 and made it repeat to be clear.
Of course, you can make it stop scrolling at page 5.

This plugin is good for web application like online book that use infinite scroll.
You need to provide not only next page but also previous page in advance.
Let's say you access to page 2.
Then it should provide page 1 and page 3 in advance.

/
├ page-1.html
├ page-2.html *
├ page-3.html
└ ...

page-2.html

...
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./infinite-scroll-up-n-down.min.js"></script>
<script type="text/javascript" src="./example.js"></script>
...
<body>
  ...
  <div>
    <div id="contents">
      <!-- Loads contents here from page 1 -->
      <h2>Page2</h2>
      ...
      <!-- Loads contents here from page 3 -->
    </div>
  </div>
  ...
  <a class="nav-prev" href="./page-1.html">Prev</a>
  <a class="nav-next" href="./page-3.html">Next</a>
  ...
</body>
...

Because of bug, you can not put #contents in the first layer so far. You need to wrap it by a tag. Issue#2.

example.js

$('#contents').infiniteScrollUnD({
  downNav: '.nav-next',
  upNav: '.nav-prev'
});

Basic

Run the command below.

$ git clone https://github.com/rikuson/infinite-scroll-up-n-down

Load it into your HTML file with jQuery.

example.html

...
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./infinite-scroll-up-n-down.min.js"></script>
...

Name	Type	Default	Description
downNav (Required)	String	null	jQuery selector.
upNav (Required)	String	null	jQuery selector.
threshold	Number	$(window).height()	Timing it starts loading next contents. The unit is pixel.
prefill	Bool	true	If you load next contents when you open the page.
container	String	this.selector	jQuery selector. Where to load contents. Sometimes, the default value doesn't work. You need to specify in that case. Issue#1.
timeout	Number	1000	How long it try to load page.
maxRequest	Number	3	How many times it try to load page.
append	Function	null	Callback function after append contents.
prepend	Function	null	Callback function after append contents.

Infinite Scroll Up 'N Down

Demo

Try scroll up and down!

Usage

Installation

Basic

Options