JMiur [E]

Este sería un método genérico de agregar la posibilidad de animar el desplazamiento interno ha cualquier parte de una página web. En palabras simples, hacer click en alguna parte y que la página se mueva y nos ubique allí.

Hay muchos plugins de jQuery que lo hacen pero para un uso normal, suelen ser excesivos porque están pensados para adaptarse a situaciones y necesidades diversas y, al final de cuentas, uno siempre los usa de modo bastante más elemental.

¿Cómo hacer esto? Basta saber dos cosas: la posición de la etiqueta donde se hace click y la posición de la etiqueta a donde queremos ir; luego, bastaría usar la propiedad scrollTop para mover la página esa distancia.

Por ejemplo, este enlace nos desplazaría hasta el footer de la página:
<a class="moverse" href="#footer-wrapper">ir al footer</a>
El script es sencillo, asociamos una clase cualquiera (en este caso la llamo moverse) a un evento onclick:
$('.moverse').live('click', function(e) { 
  // con esto, impedimos que se ejecute (más información)
  e.preventDefault();
  // leemos el atributo href de la etiqueta que es el ID a donde queremos ir
  var adonde = $(this).attr('href');
  // guardamos su posición en la página (más información)
  var posicion_donde = $(adonde).offset();
  // y calculamos la distancia entre donde estamos y donde queremos ir
  var distancia = posicion_donde.top;
  // por último, nos movemoss usando una animación (más información)
  $('body,html').animate({scrollTop: distancia}, 500);
});
<a class="moverse" href="#outer-wrapper">ir al inicio de la página</a>

9 comentarios:

Indeziisoow  

Muy bueno. Tengo una pregunta que no tiene que ver mucho con esto. Bueno es de jQuery y es si se puede hacer drag and drop con jQuery y que funcione en blogger.

Agradecería tu respuesta.

JMiur  

Sí, se puede. Necesitas algún plugin extra como como este o buscar cualquier otro en función del uso que le quieras dar. Hay muchos.

La extensión UI también `psee esas funciones.

Indeziisoow  

Muchas gracias. Me resulto muy bien. Solamente que había que agregar un script adicional. Por eso no me resultaba, pero ahora todo bien.

Saludos, JMiur.

Responder
Bonzu Pipinpadaloxicopolis III  

Por fin!, un método simple, gracias JMiur. Oye he notado que muchas imágenes en mi blog se cambian por un cuadro negro con un signo negativo, ¿a qué se deberá?

JMiur  

Esa es una imagen de Picasa/Blogger que se muestra cuando la imagen no existe. Puede ser que se hayan borrado o que por algún motivo, el álbum donde estaban se ha colocado como privado.

Bonzu Pipinpadaloxicopolis III  

Pues he revisado mis álbumes en Picasa y las imágenes están ahí, y las propiedades del álbum no han cambiado. Esto solo ocurre en algunas publicaciones viejas. También he notado que las urls son diferentes. Que molesto es tener que corregir cada publicación. ¿Será por algún cambio en el servidor?

JMiur  

Puede ser que sea eso, que se deba a la URL de la imagen.

Responder
Gem@  

Esto es justo lo del sitio que te comentaba el otro día. Es más sencillo de lo que pensaba, menos código quiero decir.

JMiur  

Es lo que te decía por mail. Ese plugin me parecía excesivo :-)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR