How To Add Go Up And Go Down Buttons Using The JQuery Slide Effect

At the right corner of this page, you can see that there is an Up and Down Button. It is very essential to have an Up and Down buttons in order to scroll your page content easily, specially on the main page of your blog wherein there are many articles or when an article has too many comments from your vivid readers. Further, these buttons have a fade in and fade out effect, it means that it will fade slightly when you scroll it to the top or to the bottom of the page in your blog.

How To Add Go Up and Go Down Buttons Using The JQuery Slide Effect

Step 1. Go to Template, click on the Edit HTML button
Step 2. Select the "Expand Widget Templates" box Step
Step 3. Search (using (CTRL + F) for this piece of code ]]></b:skin>
Step 4. Just above ]]></b:skin>, paste the next code:

/* Up and Down Buttons with jQuery

----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:5px solid #CCC; /* Border Color */
position:fixed;
background:blue
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFIkd9GPwGrZeVgyyIUxW6hoC8S4ossECYcNUEQxSNgn2IAaD34HsDgzhde_HRvuqigdRzu-P1rS9rl-9pCBQudKs1yBrMgE0yUC5yyLuw7xDJBMWix_2s06kwPoxPXgCgco54qpjkBCM/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:5px solid #CCC; /* Border Color */
position:fixed;
background: blue url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJMTsiASV0TaWGfCi4_RXUhXvZbp_hNxnjMQfavlQ-hKFFI4x2fpIWudAVarLeV9dtNN5TtGdR43IeAUa-Y__c7-SWSq0m8INuj4BwzRRBZDv7fE45rFB0-7uw1rQo11HzTNU2ekpUqzo/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);
}

Short Customization ( Optional ):

 - You may change the bold green texts /* Your Own Styles Here*/ on what styles you would like to appear
 - You may change the arrows by changing the URLs in bold red.
 - To may change the background color of buttons by replacing the blue text with your own preferred color ( try our color code generator here)
 - If in case you want to remove the "Go to top" button, just remove the 1st set of code (it start with a .button_up) and to remove the "Go to bottom" button, just remove also the 2nd one ( it started with a .button_down).

Step 5. Now find (CTRL + F) for this piece of code </body>. 

Step 6. And just above / before this code </body>, paste the codes below:

<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 7. Save your Template.
       

Take Care Friends!