Edit HTML and adding the code
Click on Edit HTML option in Blogger and search for </body> tag in your template by pressing Ctrl + F. Add the below given code just above </body> and save the template. Thats it.
Live Demo
-
<style type="text/css">
#abt-Top {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<!-- Scroll to Top Plugin for Blogger by www.kalugejs.blogspot.com-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"/>
<script type='text/javascript'>
jQuery(function($) {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
jQuery(function($) {
$("#abt-Top").scrollToTop();
});
</script>
<!-- Scroll to Top Plugin for Blogger by www.kalugejs.blogspot.com-->
<a href="#" id="abt-Top" style="display: none;">Scroll to Top </a>
You can customize the CSS to match your requirements. You can replace the CSS button with image by changing the CSS background with URL of the image that is using the tag background: url()
Your Scroll to top button is ready.

0 Comments:
Post a Comment