‘Autoscroll’ con Prototype no obstructivo

Seguramente conocemos las etiquetas anchor, las cuales que tienen la peculariadad de saltar a contenidos en una misma página. Pues bien, mediante Prototype y el archivo Effects de script.aculo.us podemos convertir este salto a contenidos en desplazamiento a contenidos, lo que se conoce como autoscrolling. Vamos a ver una forma algo incómoda, pues tenemos que agregar una función al evento click de cada etiqueta de enlace (<a ..></a>) y luego una forma menos tediosa usando la versión 1.5.1_rc1 de Prototype, que incluye la función $$ para aplicar el efecto a todas etiquetas de enlace. Antes que nada agrega los archivos necesarios.

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script> 

Trabajando con el evento onclick

Podemos crear una función para el efecto de autoscrolling:

<script>
function IrA(ubicacion){
 //new Effect.ScrollTo('id etiqueta',{opciones});
 //offset -> Numero negativo o positivo de pixeles
 //			de ubicacion en la parte superior
 new Effect.ScrollTo(ubicacion);
 }
</script>

Ahora en el contenido podemos lo siguiente:

<h2 id="indice">Importantes ciudades del Per&uacute; </h2>
<ul>
 <li><a href="#trujillo" onclick="IrA('trujillo'); return false">Trujillo</a></li>
 <li><a href="#arequipa" onclick="IrA('arequipa'); return false">Arequipa</a></li>
 <li><a href="#cusco" onclick="IrA('cusco'); return false">Cusco</a></li>
</ul>
<h3 id="trujillo">Trujillo</h3>
 <p><!--contenido extenso aqui--></p>
 <p><a href="#indice" onclick="IrA(indice); return false">Ir al Indice</a></p>
<h3 id="arequipa">Arequipa</h3>
 <p><!--contenido extenso aqui-->
 <p><a href="#indice" onclick="IrA(indice); return false">Ir al Indice</a></p>
<h3 id="cusco">Cusco</h3>
 <p><!--contenido extenso aqui--></p>
 <p><a href="#indice" onclick="IrA(indice); return false">Ir al Indice</a></p>

Si vemos el ejemplo en acción notaremos que funciona muy bien. Pero el incoveniente es que debemos especificar la función IrA() en el evento onclick de todas las etiquetas de enlace <a></a>.

Pero veamos ahora un proceso mas sencillo, es decir que requiere menos líneas de código.

Haciendo todo lo anterior con una sola función

Vía Ajaxian me entero que Tobie Langel haciendo uso de las mismas herramientas, pero con el Prototype 1.5.1 rc1, implementa el scrolling con una sola función:

<script>
 Event.observe(window, 'load', function() {
  $$('a[href^=#]:not([href=#])').each(function(element) {
   element.observe('click', function(event) {
    new Effect.ScrollTo(this.hash.substr(1));
    Event.stop(event);
   }.bindAsEventListener(element))
  })
 })
</script> 

En su artículo A Fistful of $$ (Por un puñado de dolares) explica esta función haciendo uso del nuevo operado de Prototype: $$. [Ver Ejemplo]