How to add back to top or scroll to top button in blogger?

By adding a beautiful and simple back to top or scroll to top button into your blogger blog, you can get a lot of benefits such as go back to the top by one click. 

If your blog homepage has a lot of posts or if you have long posts and the share buttons are placed below the post titles that will be more important. Sometimes after reading your long post by your readers, they may be interesting to share your articles via their social media profiles. 

If your social media buttons placed in the below of your post titles, then readers have to scroll your page back to the top of your post by manually.  But if you have a back to the top button or scroll to the top button you and your readers can go back to the top of your post or homepage by one click within one second without scroll up to the page manually.

What is back to top or scroll to top button?

Simply that is a button at the bottom of your homepage or post pages. By clicking on that button readers can easily go back to the top of your homepage or post page within a second without clicking or scrolling up manually. Because of that button After reading your long post to the end by your readers, they can easily go back to the top of your post by one click.

If your blog hasn’t a better navigation or your share buttons is located at the below the post titles or you are interested to add and text different widgets to your blog or if you are looking to add some professional look for your blogger blog, you can try to add that back to top or scroll to top button into your blogger blog. Not only that back to top button if you like also you can add a widget like News ticker bar for your blog homepage.it will make attractive for your blog.

You can add back to the top/scroll to top button or customized button image as you prefer.

How to add back to top/scroll to top button to blogger blog?

Step 01: Sign in to your blogger blog

Step 02: Go to dashboard >> Template>> click on Edit HTML button.

Step 03: Find (click Ctrl + Fbuttons) ]]></b:skin> and add below code before or above]]></b:skin>

.backtotop {

 display:none;

 position: fixed;

 bottom: 2em;

 right: 0px;

 text-decoration: none;

 color: #ffffff !important;

 background-color: #000000;

 text-transform: uppercase;

 letter-spacing: 2px;

 font-weight: bold;

 font-size: 11px;

 padding: 1em;

 }

.backtotop:hover {

 background-color: #f6f6f;

 text-decoration:none;

 color:#ffffff;

 }

*Customize – you can replace highlighted color as you prefer. 

Step 04: Now find </body> tag and Cope below code and Paste it before or above </body> (or Save above code >> go to Layout >> add a gadget >> copy paste blow code >> save and place it as you prefer (in Footer) >> Click savebutton in layout.)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>

jQuery(document).ready(function() {

var offset = 220;

var duration = 500;

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > offset) {

jQuery('.back-to-top').fadeIn(duration);

} else {

jQuery('.back-to-top').fadeOut(duration);

}

});jQuery('.back-to-top').click(function(event) {

event.preventDefault();

jQuery('html, body').animate({scrollTop: 0}, duration);

return false;

})

});

</script>

<a href="data:blog.url" class="back-to-top">Back to Top</a>

Customize – if the above code not work try to replace 'data:blog.url' with your blogger blog URL

Step 05: Save template

How to add back to top/scroll to top image button to blogger blog?

Step 01: Sign in to your blogger blog

Step 02: Go to dashboard >> Template>> click on Edit HTML button.

Step 03: Find (click Ctrl + F buttons)  ]]></b:skin> and add below code before or above ]]></b:skin>

.backtotop {

position: fixed;

bottom: 10px; /* increase value to move position up */

right: 0px; /* increase value to move position left */

color: #000000; /* color of text */

background-color: #ffffff; /* background color of button */

font-size: 12px; /* changes size of text */

padding: 10px; /* add space around the text */

text-transform: uppercase; /* change text to all caps */

letter-spacing: 1.0px; /* space between letters */

}

.backtotop:hover {

background-color: #333333; /* color of background on hover over */

color: #ffffff; /* color of text on hover over */

text-decoration: none; /* no underline */

bottom: 10px; /* increase value to move position up */

right: 0px; /* increase value to move position left */

padding: 10px; /* add space around the text */

}

*Customize – you can replace highlighted color and codes as you prefer. 

Step 04: Now find </body> tag and Cope below code and Paste it before or above </body> ( or Save above code >> go to Layout >> add a gadget >> copy paste blow code >> save and place it as you prefer (in Footer) >> Click  save button in layout.)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>

jQuery(document).ready(function() {

var offset = 300;

var duration = 500;

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > offset) {

jQuery('.backtotop').fadeIn(duration);

} else {

jQuery('.backtotop').fadeOut(duration);

}

});

jQuery('.backtotop').click(function(event) {

event.preventDefault();

jQuery('html, body').animate({scrollTop: 0}, duration);

return false;

})

});

</script>

<a href="data:blog.url" class="backtotop"><img src="DIRECT IMAGE URL HERE" alt="Back To Top"></a>

Customize –  Replace DIRECT IMAGE URL HERE with your customized button image URL

*if the above code did not work try to replace 'data:blog.url' with your blogger blog URL

Step 05: Save template

If you haven’t customized Button, then choose one of below image button sample.

back to top button image 1

back to top button image 2

back to top button image 3

I Hope the above methods help you to add back to top or scroll to top button in blogger. And if you have any problem or know more fixes on this back to top or scroll to top button for blogger, Please share with us in the comments section below. Happy blogging!