How to Insert a Scroll To Top Tumblr Button

If your Tumblr blog just became too extensive and don’t want your readers to skip the site before they reach the top of the page, then this Scroll To Top Tumblr button is the solution. Not only this Tumblr Code allows you to go to the top in no time, but also go to the bottom, specially useful when you have endless navigation and you pulled tons of posts. If you have the time and a image editor, you can customize your Back To Top button with any picture you want, even add effects to it!.

How To Add a Scroll To Top/Back To Top Tumblr Buttons Arrows

1. The first script that needs to be included in order to have a Back To Top Tumblr Button is the following script, paste it right before the </head> tag in your tumblr theme html:




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(function () { $('#scrlBotm').click(function () { $('html, body').animate({ scrollTop: $(document).height() }, 1500); return false; });   $('#scrlTop').click(function () { $('html, body').animate({ scrollTop: '0px' }, 1500); return false; }); }); </script>

2. There’s a second bunch of code to implement the Scroll to Top/Back To Top Tumblr button. This code needs to be pasted right before the </body> tag in your Tumblr theme html.




<a id=”scrlTop” title=”Top” href=”#” style=”position: fixed; bottom: 390px; right: 2px;”><img src=”http://static.tumblr.com/p2evvtm/Q7Tlyb7kn/arrow-scrolltotop-2.png”></a>   <a title=”Home” href=”http://mrtumblring.tumblr.com/” style=”position: fixed; bottom: 361px; right: 25px;”><img src=”http://static.tumblr.com/p2evvtm/sOElyb7xb/home-page-tumblring.png”></a>   <a id=”scrlBotm” title=”Bottom” href=”#” style=”position: fixed; bottom: 282px; right: 2px;”><img src=”http://static.tumblr.com/p2evvtm/DbPlyb7k4/arrow-scrolltotop.png”></a>

3. In case you are not satisfied with our Scroll To Top Button Image, go to iconfinder.com and search for “arrows”, download the chosen image as a png file and save it. You can, and probably have to modify the size of it, and also create a mirror upside-down image of the arrow you just downloaded.
4. Upload both images to Tumblr files uploader.
5. Once Tumblr gives you the full url to the static image, you can replace the ones we used (the exact urls to be replaced are highlighted in red).
6. Now, update preview, SAVE and check your Tumblr blog to check if it works.