how to add infinite scroll tumblr

I've always been a fan of infinite scrolling, as it seems much easier to just keep scrolling down to find new content versus using pagination which requires more clicking. Some favor pagination, but if you are interested in adding infinite scrolling to your Tumblr, here's how you will do it.

If you are not familiar with infinite scrolling, all it basically means is that you can continue to scroll down the page and as you scroll, new content will automatically load. You don't need to click anything, such as Page 1, Page 2, and so-on. For Tumblr users, you may recognize this on the Tumblr Dashboard, where you can just keep scrolling and loading new posts. For non-Tumblr users, it's just like the Google Images results page. If you keep scrolling down, new images will continue to load until you hit the end.

The benefits to infinite scrolling are

Page loads are static. If you have a lot of content to show, it's hidden until you scroll down and the page will load the new content with infinite scrolling. You can actually load less content with this, knowing it's hidden until ready to be displayed (which will ultimately make for faster loading with less content on page load).
Users stay on the single page without having to click several pages to get additional information possibly leaving the page and losing their attention.
Zero extra effort on the part of the user and the scrolling is seamless.

How infinite scrolling works

Infinite scrolling uses JQuery Javascript to target specific HTML on the page which allows the page to only show and load that part of the page and stop. Then you can either load automatically or trigger loading of the page for infinite scrolling by specifying the area.

I won't get into all the specific code details (because a lot of it goes over my head as well and get's really complicated). Just know it works and it works pretty damn well! It's a lightweight function, so it doesn't take a whole lot for your browser to render the code. Also to note, I did not by any means write this code. It was written originally by Proto.jp and was modified and explained by Cody Sherman, which is where I got the code. To use infinite scrolling on your Tumblr, such as I have here on BitShare, simply do the following:

Go to Customize on your Tumblr page, click Edit HTML and anywhere after the HEAD tag, and before the begining of the STYLE tag, copy and paste this:

<!– Infinite Scroll BEGIN –>
<script type="text/javascript" src="http://codes.bitshare.cm/infinitescrolling.js"></script>
<!– Infinite Scroll END –>

If you have pagination links at the bottom of your Tumblr that you would like to remove (like Page 1, Page 2, etc), you will need to click Edit HTML and find the Pagination block and remove it. The easiest way to find it will be to hold down the ctrl key and press F for find (CTRL-F). Type in "pagination" and when you find the {block:Pagination} remove that and everything between that and the end {/block:Pagination}.

If you aren't comfortable with editing your HTML, you can copy and paste the same code into your Tumblr Description. If that doesn't work, check out Cody's explanation which has some other alternatives and information. If you have questions, feel free to drop them in the comments below.

For information, see http://bitshare.cm/post/41459541543/how-to-add-infinite-scrolling-to-your-tumblr