Simplex Next

Ya antes había publicado una entrada para agregar un botón que permitía subir dentro del blog, ahora, y por curiosidad de "ÐŖǻĜǾŊ ÃζЏĿ", les muestro otra forma que además de darnos el botón de subir, se adiciona el botón para bajar, todo esto con un efecto deslizante en jQuery.

Los pasos a seguir son muy sencillos, básicamente se trata de lo siguiente:

• Libreria jQuery (para hace el efecto).
• Elemeto en el Blog (Donde lo vamos a poner dentro del blog).
• Css. (para que se vea chulo de bonito!).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/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 src='http://isaiasgah.web.officelive.com/Documents/scroll-startstop.events.jquery.js' type='text/javascript'/>

<script type='text/javascript'>

 $(function() {
  var $elem = $(&#39;#content&#39;);

  $(&#39;#nav_up&#39;).fadeIn(&#39;slow&#39;);
  $(&#39;#nav_down&#39;).fadeIn(&#39;slow&#39;);

  $(window).bind(&#39;scrollstart&#39;, function(){
   $(&#39;#nav_up,#nav_down&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;});
  });
  $(window).bind(&#39;scrollstop&#39;, function(){
   $(&#39;#nav_up,#nav_down&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;});
  });

  $(&#39;#nav_down&#39;).click(
   function (e) {
    $(&#39;html, body&#39;).animate({scrollTop: $elem.height()}, 800);
   }
  );
  $(&#39;#nav_up&#39;).click(
   function (e) {
    $(&#39;html, body&#39;).animate({scrollTop: &#39;0px&#39;}, 800);
   }
  );
        });

    </script>

<div class="content" id="content">

</div>

.nav_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://i49.tinypic.com/ivwpit.jpg) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:7px;
opacity:0.7;
left:30px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://i47.tinypic.com/vwpe88.jpg) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:7px;
opacity:0.7;
left:70px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Entrada realizada por:Isaias Arredondo

Tags: Blogger , jQuery , Trucos Blogger