How To Add a Tumblr-like Back-to-top Button In Blogger

Info Post

RITHY

3:48 AM

In one of our previous posts, we featured a tutorial that shows you how to add differentback-to-top buttons into your Blogger blog. This time we’ll show you another one that’ll teach you how to add a ‘Back-to-top’ button that is similar to Tumblr’s button design.

From you Blogger dashboard, head over to the Template page.

Click on the Edit HTML button and then hit Proceed.

Using Ctrl+F, look for the <head> tag.

Copy/paste this line of code above or before it.

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

Using Ctrl+F again, look for ]]></b:skin> this time and copy/paste the following CSS code below right before 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;
}

For the button to perfectly blend or match your blog’s theme and color, don’t forget to edit the values of the following CSS attributes: Background-color, color, font-family, font-size, and line-height. The last three attributes determine the appearance of the caret symbol (^). You might also want to adjust border-radius in case you want to change the curvature of the rounded corners of the square.

Lastly, to add the functionality of the button, we add the following JavaScript code into the HTML. Using Ctrl+F again, look for the </body> tag and paste the following.

<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>