FREVR
Scroll forever and never stop.

A jQuery plugin to make your blogs bounce rates drop

(Although engaging content helps too).

Contents:

Usage

The three steps you need to make to have a neverendingforeverongoing blog.

Step 1 Install the libraries.

You will need the jQuery library and the frevr plugin. In that order, at the bottom of the page. Like so:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="frevr.jquery.js"></script>

You will need to upload the frevr.jquery.js file someplace, or you may also just copy it to your blogs HTML template.

Step 2 Configure frevr.

Frevr has two options, the first is next, which tells the plugin where to look for the next page URL. And the second is posts that defines where (in what container) to put the newly loaded posts.

Below the script tags you inserted in step 1 put the folliwing code:


<script>
$( document ).ready(function() {
    // Configure frevr
    $.frevr({
        // The ID value of your next page <a> button.
        next : '#next-page',
        // The ID value for the posts container.
        posts : '#posts',
        // The distance in pixels from the bottom to activate the plugin
        trigger : 300
    });
    // Make it so!
    $.frevr.init({
        before : function(){
            // called before attempting to load next page
        },
        after : function(){
            // called after attempting to load next page
        }
    });
});
</script>

This code is best put at the bottom of your page. Just above the </body> closing tag.

Replace #next-page with the ID of the link that takes you to the next page.

For example if your pagination HTML looks like this:


<ul>
    <li>
        <a id="go-to-previous-page" href="page/1">Previous</a>
    </li>
    <li>
        <a id="go-to-next-page" href="page/2">Next</a>
    </li>
</ul>

This means your next value is #go-to-next-page.

Next replace posts with the ID of the container that holds all your posts.

If you are using tumblr, this would be the tag containing your {block:Posts} template tag.


<div id="container">
    <div>
        ... Post 1
    </div>
    <div>
        ... Post 2
    </div>
    <div>
        ... etc.
    </div>
</div>

This means that your posts value is #container

So given the above two situations your configuration would look like this...


<script>
$( document ).ready(function() {
    $.frevr({
        next    : '#go-to-next-page',
        posts   : '#container'
    });
    // Make it so!
    $.frevr.init();
});
</script>

Sep 3 Scroll forever!

Go ahead, keep scroling ↓.

Demo — The forever part of this page.

You can confidently keep scrolling down forever.

Really.

Scroll
down
↓