Adding a "go to top" or "go to bottom" button in a blog makes it user friendly and also helps the readers to scroll up and down immediately. This button given here goes to top or goes to bottom with a "scroll". To do this, you need to add some HTML codes to your blogger template. Follow these simple steps to add a "go to top" and "go to bottom" to your blog.
Step 1: Go to your blog dashboard>Template>Edit HTML and paste the following code.
As mentioned above, because you need to add some codes to your HTML, you must go to Edit HTML. Now, paste this code just after the tag <b:skin>. (Finding codes in a template could be sometimes a little difficult but don't worry. You can search for a code by pressing Ctrl+F)
/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMTFnnhBwVgQbZBKaPGHIPhUNWoclKZ97DjSEPWZucvjwAHJUgm_CXdyWbkpFSYqEgNfrbPAjNWERX5F8sCVRiZl2pT3CL1YRg5FRfssKyMcC8i08pLIvbbonxUbYPlW64dnm1sLAKZKY/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6MrjydC1nf6PmvCbCdozRTia95lERIKVKCWziJRRsYUq51VMHts1QtnuqvljV_U39j902CyI7Oi9q4RfCTzT-q2d75r6kVC9LjVFGW72qROFcL3ubhWPui7kCzWsySiLzb4UYP7mP8Nk/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
Step 2: Find the tag <body> and paste the following code just after it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>
Step 3: Go to preview template.
When you go to preview template, you should see a button on the right side of your blog. If not, you may have done something wrong. Just check if you have followed all the steps or just left out one. Hope you enjoy this button!!
