Infinite Scroll for your Tumblr
If you already HAVE endless scrolling, make sure to change “http://codysherman.com/tools/infinite-scrolling/code” to “https://cdn.rawgit.com/humphreybc/tumblr-infinite-scroll/master/infinite-scroll.js” because codysherman doesn’t exist anymore and your code is broken.
If this is your first time creating endless scrolling because your theme doesn’t auto provide it as an option…
I’m not an expert in CSS, but here’s what I gathered about inserting the current code (as of Nov 20, 2016):
- Go to Edit Theme and then Edit HTML
- BACKUP your current code by copy/pasting it into a text file in case you break something
- Follow the steps below but NOTE Tumblr auto generates smart quotes “” which will break the code, so you’ll need to manually switch out the smart quotes for straight quotes
Step 1: Insert ABOVE {CustomCSS}
#scrollToTop:link,#scrollToTop:visited { color: transparent; background-color: transparent; display: none; position: fixed; top: 15px; right: 15px;}
Step 2: Insert ABOVE </head>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script src=“http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js”></script><a href=“javascript:;” id=“scrollToTop”><img src=“https://68.media.tumblr.com/tumblr_lpvu9709KH1qlzq96.png” border=“0”></a>
<script type=“text/javascript” src=“https://cdn.rawgit.com/humphreybc/tumblr-infinite-scroll/master/infinite-scroll.js” ></script>
Step 3: Insert ABOVE {block:Posts}
<div class=“autopagerize_page_element”>
Step 4: Find the following and DELETE it <div> {block:NextPage} code {/block:NextPage}
{block:PreviousPage} code {/block:PreviousPage} </div>
If you followed the steps right, you should now have infinite scrolling AND a scroll-to-top button, with no Next and Older page buttons in between posts.
[Attribution: I lost the source for the scroll-to-top code, but the new endless scroll host (and where I found the steps to fix my own script) is here.]
