Scroll to Top Button For Blogger
Adding scroll to Top button to your blog can help your visitors to reach on the top easily and rapidly.This widget is made of CSS.scrolling effect is due to jQuery.
The button will not appear when the scroll bar is on the top it will appear only when he visitor will scroll down a little.
A live example can be seen on my blog.Try to scroll down little and you will find the button at the right bottom .Below procedure is give for adding this cool button to your blog.
Editing HTML and adding code.
Go to Template → Edit HTML and find </body> . Paste the below code just above </body>
<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.bloggertricks4all.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.bloggertricks4all.blogspot.com-->
<a href="#" id="abt-Top" style="display: none;">Scroll to Top ↑ </a>
#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.bloggertricks4all.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.bloggertricks4all.blogspot.com-->
<a href="#" id="abt-Top" style="display: none;">Scroll to Top ↑ </a>
That`s It...
After pasting this code to your Template Save it.You are done...
Last Words
If you have any doubt please leave it in Online help Box.
