'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ú </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.
Ver Artículo Completo ››
Ara Pehlivanian ha creado una script que permite agregar un 
Navegando en busca de iconos parecidos a los temas de WordPress me encontre con el blog 
