botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento para Blogger

En esta ocasión le traigo un tutorial que espero que les guste,
aprenderemos como colocar dos botones; una para poder ir arriba y otro para poder ir abajo,
que seran de gran utilidad para nuetros que nuestros lectores, que les facilitar mucho ver el contenido de nuestras
entradas cuando aveces son demaciado lagas.

Para esto usaremos jquery, por lo tanto,
Si usas Scriptaculous podrías tener complicasiones, al final les dejare a solucion.


Veamos entonces cómo poner los botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento usando jQuery.
Lo primero es entrar en la Edición HTML y pegar antes de ]]></b:skin> los estilos:

    /* Botones de Ir arriba e Ir abajo con jQuery
    ----------------------------------------------- */
    .nav_up{
    padding:7px; /* Distancia entre el borde y el ícono */
    background-color:white;
    border:1px solid #CCC; /* Color del borde */
    position:fixed;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZPtukToWS5EVyk1vxmRD_Zef5pGOspmAZz5Wd2e5MveYViGopAFzQLeEh5lAK1qYSXiLHe6WhB6A32VOEt8oViXJFJpo93XnEzHuQnuaXohxOoC8cuSCte1se3Mkx-wT09uW6LZyX8U/s16/arrow_up.png) no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Ancho del botón */
    height:20px; /* Alto del botón */
    bottom:10px; /* Distancia desde abajo */
    right:30px; /* Cambiar right porleft si se quiere a la Izquierda */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    .nav_down{
    padding:7px; /* Distancia entre el borde y el ícono */
    background-color:white;
    border:1px solid #CCC; /* Color del borde */
    position:fixed;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQom_hkvZ3EtNeWv4atahkOWobKTonjqZThavO6_Eacd9nCSrsSeRBR_-NSwefh1rkO_8OuzmO29vzZDDITICcfiq94Vrtgx2sT3OU0e7MliTiWJW3ZnkFt_Vq3wyGilygihcEYx5cek/s16/arrow_down.png) no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Ancho del botón */
    height:20px; /* Alto del botón */
    bottom:10px;
    right:70px; /* Cambiar right porleft si se quiere a la Izquierda */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }

Luego antes de </body> pega este código:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <div class='nav_up' id='nav_up' style='display:none;'/>
    <div class='nav_down' id='nav_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');
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');
    $(window).bind('scrollstart', function(){
    $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
    $(window).bind('scrollstop', function(){
    $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });
    $('#nav_down').click(
    function (e) {
    $('html, body').animate({scrollTop: $elem.height()}, 800);
    } );
    $('#nav_up').click(
    function (e) {
    $('html, body').animate({scrollTop: '0px'}, 800);
    } );});
    //]]>
    </script>

Y listo. Todo lo que esta de color puedes modificar al estilo que quieras,
desde las posiciones de los botones, bordes y otros.


De antemano les conete que su usaban escriptaculos tendian complicaciones, para eso
ver la siquiente entrada.

Via: Ciudad blogger