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.

Thankq one and all for visiting our blog . Keep visiting :)

Get Free Blogging updates in your Email

About Author

Keerthish Kodali is the founder of MyBlogStory.com. He is a passionate blogger, DevOps and Systems Engineer, Data Center Analyst, and web designer. Friendly by nature, he believes in a world without borders. He’s also an avid stock trader and crypto investor ~~~ Read More