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>
<!-- ir arriba,centro y abajo -->
<a id='irarriba'></a>
<a href="javascript:jQuery.scrollTo('#irarriba',3000);"><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBQZ0L0HuTmlTDdYc_eqWKRSPvSt1ZvNkSWlDxKcL6J2Ifu53R2PviMq8aS-C-371ro2zQzcmBiBOaKCKdLGo_FAA2mgM9Pot4D7j9cY3qkd2CJa2U1Kj0Ia2UXv9_t4zn12_UMBBBxW4G/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/AVvXsEi7r0Ju8Cn4vU7JZ331trrD8g7PDq_sMo-MOB5gtPquWLNv1svDrHSHewuKeweQ-yd5Asl9L_PccmSSJAUgDHmC9zErmPMnq4OoLbmDuqgXVLlxlHI4wpEF1KPfZUET9ZB3CtpsJ7K2unaT/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/AVvXsEjrXvLIPRj5zElLdDV9GwO9EkHd-wS49siz0Hv6jWGFvu5EqfMzeh8jRvx0bipuIYIQl2yscVfqdBJGBeOMcKwlsRCANMNt3Qa5FPsIB2ah8clvsdzQII2agtPAF3G9jFDx5cWQFWRR10wy/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/></a>
<!-- fin ir arriba,centro y abajo -->
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.
0 comments:
Post a Comment