Scroll Top or Back to Top button Widget to bloger blogspot

Add a Scroll to Top button to Blogger Blog 

Friends , as always I am giving out code for one of the  best & must be added featured widget for your blogger blog . This will add you a smooth and good looking professional Back to Top Button to your blogger blog easily .

By this , visitors of your blog can feel free to scroll back to top at any time . Its always good to make your blog user friendly so that can attract more visitors and even make them to stay with Us or following  our blog .

For live demo for this widget , you can check the same blog you are in .

Okay , let me go into the story .

Steps for adding Back to Top Button to Bloger Blog 

Step 1: Open your Blogger dashboard 

Step 2: Open "layout" and  click on "Add a Gadget"

Step 3:  Click on " Add HTML/ Java Script "


Step 4 : Just copy and past the below given code into the " Content " Box there  

<!-- Back to Top Scroll Button widget by www.myblogstory.com -->

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

<style>

div#page {

max-width: 900px;

margin-left: auto;

margin-right: auto;

padding: 20px;

}

.back-to-top {

position: fixed;

bottom: 9em;

right: 0px;

text-decoration: none;

color: #000000;

background-color: rgba(235, 235, 235, 0.80);

font-size: 14px;

padding: 1em;

display: none;

}

.back-to-top:hover {

background-color: rgba(135, 135, 135, 0.50);

text-decoration: none;

}

</style>

<a href="#" class="back-to-top">Back to Top</a><!-- Back to Top Scroll Button widget by www.myblogstory.com -->

Step 5 : Save it and you are done.

Hope this would be helpful to you and please comment if you got any problem while adding to your blog.