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 a DevOps engineer who spends his free time exploring crypto, DeFi, stocks, and futures prop firm trading. His blog shares honest insights from real trading experiences, personal growth, and lessons learned along the way. To know more about me Click Here