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

As you can see at the right side of this page that there is an Up and Down Button. It is very important to have an Up and Down buttons  in order to navigate  your page content very easily, especially on the main page of your blog wherein there are many articles or when an article has too many comments from your vivid readers.  Futhermore, these buttons have a  fadeIn and  fadeOut effect, this means that it will fa
de slightly when you are scrolling it  to the top or to the bottom of the page of 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 this code, paste this one:

/* 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/AVvXsEgfm3mRazdWVD_AD9rQRpq0TFXif_CY_o5LeIg8MOlrUL7lTUXEdjchN6dVQCldLcEWXuecONc-KNdR57abNRRN434cshyphenhyphenbjgl3-J1EqQy7P9Tfv0INHyT9GgQQTPvJOLjLf4Ttk5K00E8/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/AVvXsEhxynDHN4BbcyBbo2EtQqoMSXsrhjUS8txDkA79yfsvkyrkQfNoEY3peuU4cECV_xLs63Q_RHa6NMbIZ1KZNutth0KVKvjfoGM8XKCL8fmGHhBf4r1bqou1Eu_917r1snK8d_IHgVE0weE/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 Customizations: 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 that piece of code, paste the following code 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.  And lastly, save your Template.
            Have a nice and prosperous day pal!
Credits goes to Helplogger with little modifications from me.

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook