Ir arriba, centro y abajo con Jquery. Forma 2

Ya vimos la primera forma.

Este efecto funciona con la librería Jquery.

Si ya la tienen no es necesario ponerla.

Si no la tienen poner el siguiente código arriba de </head>

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

Ahora agregamos el siguiente código abajo del anterior (quedará arriba de </head>)

<script type="text/javascript">
//<![CDATA[
// http://loseasi.blogspot.com
// Vku
(function(jQuery){var m=jQuery.scrollTo=function(b,h,f){jQuery(window).scrollTo(b,h,f)};m.defaults={axis:'xy',duration:parseFloat(jQuery.fn.jquery)>=1.3?0:1};m.window=function(b){return jQuery(window).scrollable()};jQuery.fn.scrollable=function(){return this.map(function(){var b=this,h=!b.nodeName||jQuery.inArray(b.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!h)return b;var f=(b.contentWindow||b).document||b.ownerDocument||b;return jQuery.browser.safari||f.compatMode=='BackCompat'?f.body:f.documentElement})};jQuery.fn.scrollTo=function(l,j,a){if(typeof j=='object'){a=j;j=0}if(typeof a=='function')a={onAfter:a};if(l=='max')l=9e9;a=jQuery.extend({},m.defaults,a);j=j||a.speed||a.duration;a.queue=a.queue&&a.axis.length>1;if(a.queue)j/=2;a.offset=n(a.offset);a.over=n(a.over);return this.scrollable().each(function(){var k=this,o=jQuery(k),d=l,p,g={},q=o.is('html,body');switch(typeof d){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px)?jQuery/.test(d)){d=n(d);break}d=jQuery(d,this);case'object':if(d.is||d.style)p=(d=jQuery(d)).offset()}jQuery.each(a.axis.split(''),function(b,h){var f=h=='x'?'Left':'Top',i=f.toLowerCase(),c='scroll'+f,r=k[c],s=h=='x'?'Width':'Height';if(p){g[c]=p[i]+(q?0:r-o.offset()[i]);if(a.margin){g[c]-=parseInt(d.css('margin'+f))||0;g[c]-=parseInt(d.css('border'+f+'Width'))||0}g[c]+=a.offset[i]||0;if(a.over[i])g[c]+=d[s.toLowerCase()]()*a.over[i]}else g[c]=d[i];if(/^\d+jQuery/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],u(s));if(!b&&a.queue){if(r!=g[c])t(a.onAfterFirst);delete g[c]}});t(a.onAfter);function t(b){o.animate(g,j,a.easing,b&&function(){b.call(this,l,a)})};function u(b){var h='scroll'+b;if(!q)return k[h];var f='client'+b,i=k.ownerDocument.documentElement,c=k.ownerDocument.body;return Math.max(i[h],c[h])-Math.min(i[f],c[f])}}).end()};function n(b){return typeof b=='object'?b:{top:b,left:b}}})(jQuery);
//]]>
</script>

Ahora hay que poner las imágenes de Ir arriba, centro y abajo.

Poner el siguiente código abajo de <body>

<a id='irarriba'></a>
<a href="javascript:jQuery.scrollTo('#irarriba',3000);"><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsiZ1pHHT-Sm4mhSqUTRvBMSupFxlTl-OPX-dnR_KT5Rwm62UZHR362zCfV10L9Ostq4a18TOzxS6ktxzM5hiQnIyBCsJL6c8lG8bZNFw3I44ejraR_vd2lqeKbk6uOgnxcvmbVEN7dr_/s1600/arriba.png' style='position:fixed; bottom:75px; right:10px;' title='Ir arriba'/></a>

<a href="javascript:jQuery.scrollTo('#ID-CENTRO',3000);"><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgYpHWovHXLx0zyUGyTrzyMMjKw07OY_dBASwQNtCaa-bWyUZtkoTeio_zPnwhxG4qaeYwX7TqAyNFbous5uhEZiMuFgg6ZcXydK3BfJo2yJWv1AnkJEFqAbypnTmZF0vRb1i2iy1pPaH/s1600/centro.png' style='position:fixed; bottom:45px; right:10px;' title='Ir centro'/></a>

<a href="javascript:jQuery.scrollTo('#irabajo',3000);"><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlwbks02fxrhP7dh1xse_BmkmjqEqBr0z7Wr9iNqSBCN0ggc0RpFQ3OHwiYObGNZt9TQw0JyW87OB9bqPJM9Q6G49LPcexgleoO6I1E0Z-qdXPxydRmCWA3K8w8SD4-b3mU_Am4XOAwnkx/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/></a>

Ahora vamos a personalizar el código.

1- Cambiamos las imágenes. (color azul)

2- Según las imágenes ajustamos el estilo. (color naranjo)

3- La velocidad del desplazamiento. (color negro)

    3.1- Mayor número menor velocidad.

4- Cambiamos las ID correspondientes. (color rojo)

    4.1 - #ID-CENTRO Vemos la forma en la entrada: anterior.

                                    O podemos elegir una ID de la sidebar, ejemplo #HTML5

Para terminar colocamos la Id de ir abajo.

Poner el siguiente código bien abajo de la plantilla, arriba de </body>

<a id='irabajo'></a>

Ver Vista previa y si todo esta bien guardamos.

Podemos elegir las opción que queramos, por ejemplo: solo poner el ir arriba e ir abajo.

Jquery junto con Prototype y Scriptaculous.

Este código ya esta adaptado para utilizarlo en conjunto con Prototype y Scriptaculous.

Si no funciona agregar en el primer código, abajo de // Vku (no creo que sea necesario)

La siguiente línea:

jQuery.noConflict();

Tener en cuenta que para utilizar en conjunto Jquery y Prototype - Scriptaculous, el script de Prototype y Scriptaculous siempre tiene que estar por debajo de cualquier código de Jquery. Y si agregan la anterior línea tendran que hacer lo mismo en todos los códigos que utilizen Jquery.

Obed dijo...: Gracias, me funciono en mi blog a que te refieres cuando dices Cambiamos las ID correspondientes. (color rojo) y #ID-CENTRO Vemos la forma en la entrada: anterior?

Gracias.; 8 de septiembre de 2011, 15:26
Vku dijo...: Si te funciono dejalo así.; 8 de septiembre de 2011, 15:31

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.