Tumblr Style Scroll Button for Blogger

It's been awhile since I last posted here, but I'm in the middle of doing a makeover of sorts on my main blog, so I've learned a boatload of new tricks. The first one is this handy scroll button, like the ones seen on many Tumblr sites.


Here's how to do it:

As always, make sure you've backed up your template before you start.

Backup

Go to your dashboard, and in the left menu, Click: Template

In the top right of your screen, Click: Backup / Restore

In the pop-up window, Click: Download full template

Save the file somewhere safe.

Click: Close

Now we are ready to proceed.

Install

 

You should still be in the Template page, so go ahead and click on the Edit HTML button.

In the pop-up window that appears, click on Proceed.

There are three pieces of code we need to add:

First the jQuery library:

 

Important! Skip this step if you have previously installed jQuery for another widget.

Otherwise:

Do a CTRL-F and search for your closing </head> tag

</head>

And paste in the following single line of code directly in front of it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Next the CSS:

 

Do a CTRL-F and search for your closing </b:skin> tag

]]></b:skin>

And paste in the following code directly in front of it:

#scroll-top {
    background-color: #777777;
    border-radius: 24px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) inset;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    font-family: Verdana;
    font-size: 2em;
    font-weight: bold;
    line-height: 2em;
    text-align: center;
    text-decoration: none;
    position:fixed;
    width: 48px; 
    height: 48px;
    bottom:30px; 
    right:20px;
    opacity:0.85;
    transition:opacity 0.25s ease 0s;
}
 
#scroll-top:hover{
    opacity: 1;
    color: #FFFFFF;
}
 

Note: Be sure to leave an empty line in between the code and the closing tag.

Feel free to adjust the styling any way you want.

You'll likely want to change the background-color and color properties to match your blog's color scheme.

You might also want to reduce the border-radius for a more square button.

You can also change the font-family, font-size, and line-height properties to adjust how the caret looks.

Finally the JavaScript and HTML:

 

Do a CTRL-F and search for your closing </body> tag

</body>

And paste in the following code directly in front of it:

<script type='text/javascript'>
$(function() {
    $.fn.scrolltoTop = function() {
        var scrollLink = $(this), 
            win = $(window);
        scrollLink.hide();
        if (win.scrollTop() != '0'){
            scrollLink.fadeIn('slow')
        }
        win.scroll(function() {
            if (win.scrollTop() == '0'){
                scrollLink.fadeOut('slow')
            } 
            else{
                scrollLink.fadeIn('slow')
            }
        });
        scrollLink.click(function() {
            $('html, body').animate({
                scrollTop: 0
            }, 'slow')
        })
    }   
});
$(function() {
    $('#scroll-top').scrolltoTop();
});
</script>
<a id='scroll-top' href='#' title='Scroll to top'>^</a>

And that's it.

Stay tuned, because in my next post, I'll show you how to implement cool icon graphics like the one shown above.