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>)
// 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);
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/AVvXsEgGlCFwoBC7phSZu1P7_4LovPf1_hR2e2P5hChJN9XPEMstTIJzYbwKQd_7XaBR-o4ZbRRvfkDJnBGe7SE-oJ9ypfM_ocg01n8uRgIp_ZIaBgQbh6YurUYaI45auve3HzpS8o-FP7Cc0AD-/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/AVvXsEjsWBHq7sjlwqOq5CifKXedW6MCBNyqHK55TmfeNtaEjQ0TdIi8qtUE0aLYmrgGR3go0j1bRQ3rGUJGWVPaI1ewHF6LAcSz2e92MMA7eQ8t_SMSmSomKlBU9e9KtjXB7PuAeUhEzBSNKawq/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/AVvXsEi7of0YlqRe_izgMVOpPjouu4qSeSarbxcfXQhCAhES7lMPJA85w4K7rWLYVfmU7JeLk9vFuebbz_WFXxpCeOrBAmGafMijPOpqEn1PHEVQTHd4vfjMSyOmgRn9cP1rTIfwMNBCB78GlnIy/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.
