Agregar el botón Ir Arriba con efecto Rincón Bloguero

He visto muchos botones Ir Arriba pero la transición es un poco violenta, navegando encontré un bonito botón en un lado y en otra parte una buena transición que usa JQuery por lo que resulta bastante bonita y con una velocidad que cambia según lo lejos que estemos de la parte superior del blog o de la web.

Solo deben pegar las siguientes lineas justo después del <body> o si lo quieren justo antes del </body>

Para los que ya tienen Jquery en su plantilla o en su web

<script type="text/javascript">

//<![CDATA[
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function()
{$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#toTop").scrollToTop();
});
//]]>
</script>
<style>
#toTop {
text-align:center;
padding:0px;
position:fixed;
bottom:0px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
filter:alpha(opacity=40);
opacity:.50;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /*--IE 8 Transparency--*/
}
</style>
<span" id="toTop" title="Ir Arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOT4BRe8rsYakIMoCGeNelipFNZkQPzkOTofkZlomfx_6dnV5LPA8HUpRnCMSJfoM3YvX3AgDcUUsmtwF4D0DJrj_ZUpsgq1HPKi-GCxI_gKwWHGiTSLuB8lbNiImH3zbL3gCJTB-K620/s200/arrow8a.png"/>
</span>

Y los que no tienen Jquery usen este

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"/>

<script type="text/javascript">
//<![CDATA[
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function()
{$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#toTop").scrollToTop();
});
//]]>
</script>
<style>
#toTop {
text-align:center;
padding:0px;
position:fixed;
bottom:0px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
filter:alpha(opacity=40);
opacity:.50;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /*--IE 8 Transparency--*/
}
</style>
<span" id="toTop" title="Ir Arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOT4BRe8rsYakIMoCGeNelipFNZkQPzkOTofkZlomfx_6dnV5LPA8HUpRnCMSJfoM3YvX3AgDcUUsmtwF4D0DJrj_ZUpsgq1HPKi-GCxI_gKwWHGiTSLuB8lbNiImH3zbL3gCJTB-K620/s200/arrow8a.png"/>
</span>

El código es igual de valido para Blogger o para su propia web, solo se deben agregar las lineas y el trabajo estará hecho.

Al código le hice un pequeño ajuste para que su comportamiento fuera diferente al original

Fuente: Ciudad Blogger y Adicción Blogger

Rincón Bloguero

Agregar el botón Ir Arriba con efecto

0 comentarios :

Publicar un comentario