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:

  2. <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>
  3. 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.

  4. <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>
  5. 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.
  6. Upload both images to Tumblr files uploader.
  7. 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).
  8. Now, update preview, SAVE and check your Tumblr blog to check if it works.


The Back to Top Button tumblr can also be located in any spot you want. You just need to movidy the position attribute value within the tag

17 Responses to "How to Insert a Scroll To Top Tumblr Button"

Add Comment
  1. Alexis

    March 31, 2012 at 1:35 am

    When I click customize theme, they keep saying they need to verify my email address, and i hit send it, but they still wont let me customize my theme.

    [Reply]

  2. Alexis

    April 4, 2012 at 4:14 am

    how am i suppose to verify my email address on tumblr?

    [Reply]

  3. Kriselette Chopin

    June 5, 2012 at 1:23 am

    I Want My Picture On My Tumblr Background Page My Name Is Kriselette Chopin

    [Reply]

  4. Katelyn

    June 10, 2012 at 5:31 pm

    This didn’t work for me, I don’t understand! I followed all the instructions and couldn’t get it to work.

    [Reply]

  5. Jason

    June 14, 2012 at 8:30 pm

    Hm, are the images that you have provided dead/broken? I’m having trouble getting this code to produce any results, but in the preview of my layout, I noticed that there were three images in the bottom left hand corner of the screen that just wouldn’t load. I looked through that iconfinder site to see if I could easily replace what you had provided, but those images don’t seem to be transparent? Anyways, I hope you might be able to provide some advice here, thanks for this awesome and informative site either way!

    [Reply]

  6. Marissa

    June 15, 2012 at 7:36 am

    I searched my whole theme code and there was no “”. Is there anywhere else I could paste the second code?

    [Reply]

  7. Elizabeth Ngo

    June 15, 2012 at 6:44 pm

    I have a problem. I tried changing the icon using the static link of the scroll to top button but it’s still the icon you have originally gave me…

    [Reply]

  8. JG

    June 23, 2012 at 4:54 am

    I added this code, but nothing happened…any thoughts?

    [Reply]

  9. casey

    July 17, 2012 at 7:08 am

    it didnt work.. the “arrow” was just a little box which you couldnt even telll wwhat it was. nobody would even click on it. this is a waste of time.

    [Reply]

  10. Venste Nottimar

    August 26, 2012 at 4:22 pm

    Hi there. Thanks very much for the script and codes, they work very well. ♥

    Please be advised that the quotation marks used in the second bunch of code arent the right ones, I had to replace them with retyping the quotation marks, and then it works like a charm.

    [Reply]

  11. Kellie

    December 18, 2012 at 10:24 pm

    How do I remove this from my HTML without everything on my blog disappearing?

    [Reply]

  12. bbill64

    January 26, 2013 at 1:23 am

    No dice for me, not sure what I did wrong.

    [Reply]

  13. Rachel

    January 30, 2013 at 9:34 am

    Hmmm… This one doesn’t seem to work for me for some reason…

    [Reply]

    Mr. Tumblr Reply:

    because of your layout, you need to change it or contact the theme creator to find out how to make the scroll button work.

    [Reply]

  14. Nora Alkhersam

    February 20, 2013 at 10:25 pm

    It’s not working on mine either. I’ve tried the codes in different places, but it’s just not working at all. And I know my theme creator has it set up to where it works. I’ve used one before.

    [Reply]

  15. dinae

    March 18, 2013 at 3:13 am

    so I put in the codes and it didn’t work what can I do?

    [Reply]

  16. Kevin

    March 29, 2013 at 6:28 pm

    The quotations in the code that goes before are broken. They must be retyped, which is a big pain.

    [Reply]

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>