Infinite scroll is a design technique that can help retain users on a web site – all content is viewed on a single page, yet each new chunk of content (about a page long) is fetched and displayed only when the user scrolls down. There is an excellent jQuery plugin that makes this very easy to do that can be found at http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/. It also has great documentation and support. But being new to jQuery, it took awhile to figure out the sequence of tags to use the jQuery Plugin, so I thought it would be helpful to post a really simple html example to make it obvious. First the list of files:
page2.html
page3.html
jquery.js
jquery.infinitescroll.min.js
img
File index.html contents:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Infinite Scroll Example</title>
</head>
<body>
<h2>Infinite Scroll jQuery Plugin Example</h2>
<h3>Initial Content<h3>
<p /><img src="img/img1.jpg" alt="Test Image 1" width="700px" height="500px" />
<br />Page 1 Test Image
<p /><img src="img/img2.jpg" alt="Test Image 2" width="700px" height="500px" />
<br />Page 1 Test Image
<div id="content">
<div class="navigation">
<a href="http://www.slmyers.com/web-apps/infinite-scroll/html/page2.html">Page 2</a>
</div></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#content').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#content div.post"
// selector for all items you'll retrieve
});
});
</script>
</body>
</html>
File page2.html contents:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test Infinite Scroll</title> </head> <body> <h2>Test Infinite Scroll</h2> <div id="content"> <div class="post"> <p /> <h3>Second Page of Content Below ...............</h3> <p /><img src="img/img3.jpg" alt="Test Image 3" width="700px" height="500px" /> <br />Page 2 Test Image <p /><img src="img/img4.jpg" alt="Test Image 4" width="700px" height="500px" /> <br />Page 2 Test Image </div> <div class="navigation"> <br><a href="http://www.slmyers.com/web-apps/infinite-scroll/html/page3.html">Page 3</a> </div> </div> </body> </html>
File page3.html contents:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test Infinite Scroll</title> </head> <body> <h2>Test Infinite Scroll</h2> <div id="content"> <div class="post"> <p /> <h3>Third Page of Content Below ...............</h3> <p /><img src="img/img5.jpg" alt="Test Image 5" width="700px" height="500px" /> <br />Page 3 Test Image <p /><img src="img/img6.jpg" alt="Test Image 6" width="700px" height="500px" /> <br />Page 3 Test Image </div> <div class="navigation"> <br><a href="http://www.slmyers.com/web-apps/infinite-scroll/html/page4.html">Page 4</a> </div> </div> </body> </html>
File jquery.js is of course from www.jquery.com (just download their latest version) and file jquery.infinitesroll.min.js is from www.infinite-scroll.com. And img is a directory containing 5 test images (large-ish just to make the example behave more like a real application).
Click here to see the working example.
For production apps I use php and put everything in one file, but this should clarify the basic usage to get started. Hope this helps!
It’s really well done! Respect to author.
Great info, thank you for making this available on your blog.
I’m having trouble figuring out where I need to place all the files. Per the infinite-scroll instructions I installed the plugin in the /wp-content/plugins/ directory. Should I place the example html files in the same directory?