Star LISCENCEMIT

Infinite Scroll Up 'N Down

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

GitHub Repository

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.

Open in new tab

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>
...

NPM

If you are using npm, run the command below.

$ npm install --save infinite-scroll-up-n-down
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.

日本語(Japanese)

SNS

クラウドソーシング

お気軽にご依頼ください。

English

SNS