29 de noviembre de 2011

Desplazar la página hasta Elemento HTML con jQuery suavemente

Saludos, me agrada estar aquí de nuevo escribiendo algo y es que me pareció muy curiosa la solución que conseguí para desplazar la pantalla en la que estoy navegando hacia un punto en particular, esta vez hacia un elemento HTML cuyo id es "scrollToHere", el código usando jQuery es el siguiente:

$('html,body').animate({
    scrollTop: $("#scrollToHere").offset().top
}, 2000);

y en otro punto se encuentra un div:

<div id="scrollToHere">
    Contenido del div a donde me quiero mover
</div>

Lo útil es que pude incrustar el primer código dentro de una funcion "onClick" y ejecutar el evento:

$("#miBoton").click(function () {
    $('html,body').animate({
        scrollTop: $("#scrollToHere").offset().top
    }, 2000);
});

Y posteriormente tengo el botón:

<input id="miBoton" type="button" value="Desplazar" />
Que al presionarlo ejecuta el movimiento. Muy simple y sencillo.


Gracias por leerme y encantado estaría de leer sus comentarios. Igualmente les invito a suscribirse a los feeds del sitio con su lector favorito o suscribirse a través de correo electrónico, esperaré leer sus comentarios.

52 comentarios:

  1. Muchas gracias amigo. Me ha servido perfectamente.

    ResponderEliminar
  2. Yo quería ver el demo, pero no funcionó :(

    Mónica

    ResponderEliminar
  3. Funciona, pero lo estoy instalando en una plantilla y el menu de la plantilla es fijo y tiene como unos 50px altura y al ir al elemento este mismo queda alineado con el top del navegador.

    La pregunta es se le puede colocar como una especie de margen superior ?

    ResponderEliminar
  4. Eso se soluciona con CSS, el principio ya esta listo, lo demas solo es estilos! juega con Posicionamiento CSS (Google it)

    ResponderEliminar
  5. Hola Wuilliam, ya lo intente, pero al hacer esto el elemento HMTL se posiciona justo en el TOP de la ventana del navegador, y el menu esta en ese mismo lugar y queda sobre el contenido, este tiene altura de 50px, existe una manera de que no se posicione en el TOP, si no un poco mas abajo, para alinearlo debajo del menu.

    Muchas Gracias.

    ResponderEliminar
  6. Observa la linea: scrollTop: $("#scrollToHere").offset().top

    $("#scrollToHere").offset().top es un entero, que indica la posicion donde ubicaras el div, si necesitas que este 50 px mas abajo pues usas: $("#scrollToHere").offset().top + 50

    Espero te sirva!

    ResponderEliminar
  7. Graciassssssssssssss!!! Habia buscado y buscado en la red y no conseguí un ejemplo tan sencillo y funcional como el que publicaste. Excelente. :D

    ResponderEliminar
  8. Excelente! me alegra mucho que te haya servido, esa es la idea! Un saludo!

    ResponderEliminar
  9. GENIAL!!! Llevo un montón de tiempo intentando hacer esto y no salía de ninguna manera!!! GRACIAS!

    ResponderEliminar
  10. Excelente Angelo, que bueno que te ha sido util, esa es la idea. Gracias por el comentario

    ResponderEliminar
  11. Buenas tardes!

    He probado el código y funciona, pero el problema con el que me encuentro es que solo se desplaza una distancia determinada. En mi caso, es una tienda virtual que varia la distancia segun el num de productos adquiridos y me gustaría y fuera directo a la zona en cuestión pasando por encima de todos los artículos.

    Muchas gracias.

    Feliz entrada al nuevo año

    ResponderEliminar
    Respuestas
    1. esto $("#scrollToHere") lo puedes hacer dinamico, que eso cambie segun tus preferencias! :D para que vaya al sitio que quieras :D no tiene que ser un punto en especifico :D

      Eliminar
  12. Gracias, me ayudo de mucho ;)

    ResponderEliminar
    Respuestas
    1. De nada, me alegra que te haya servido, esa es la idea. Gracias por el comentario, cualquier mejora o experiencia la puedes compartir :D

      Eliminar
  13. Esto se podría aplicar en letra o link; que no sea un botón?

    ResponderEliminar
    Respuestas
    1. Como quieras, a fin de cuentas, tu puedes adaptarlo como quieras, la magia esta es en el metodo animate, los selectores que estan actuando los puedes cambiar a tu gusto! :D. Me puedes dar mas detalles y te puedo ayudar :D te parece?

      Eliminar
    2. Wuilliam muchas gracias por tu rápida respuesta ^^ ... me gustaría utilizar este método pero en vez de utilizar botones ...
      me gustaría utilizar algo así como esto TEXTO ... pero la verdad no se como adaptar la función a un "link" ... espero haya sido claro... gracias de ante mano.

      Eliminar
    3. He actualizado el demo para que veas como se hace con un link :D

      Eliminar
    4. pude ver que el demo ahora contiene la función con texto muchas gracias lo probaré ^^

      Eliminar
    5. amigo tengo un problema con el cual espero me puedas ayudar u orientar...

      Tengo una web de una pagina con recorrido por anclas, como tu ejemplo pero solo con html... ahi todo bien...

      Hice la versión móvil de mi pagina y ahi ya no funcionaban las anclas, entonces llegue a tu genial solución con jQuery pensé que se me arreglaba el mundo XD... pero tampoco funcionó :/

      Si en móviles dejo mi pagina principal (ej: ejemplo.com) todo esto funciona.
      Pero si redirecciono a mi pagina movil (ej: ejemplo.com/movil) esto no funciona ya que al hacer una funcion # esta me la activa como "ejemplo.com/#" por lo que me redirecciona a la pagina del comienzo, cuando debería ser "ejemplo.com/movil/#" ... en mi ignorancia le asigne a los link # la palabra movil/# pero no funciona...

      espero ser claro... en conclusión las anclas en subpaginas no me funcionan, se aplican en dirección a la pagina principal y no dentro de la sub pagina.

      Eliminar
    6. he quitado el "href" como link en blanco al menos así me esta funcionando :)

      Eliminar
    7. Este comentario ha sido eliminado por el autor.

      Eliminar
    8. Mira esto: https://db.tt/QOB3YJUF
      1: Agrega el parametro e de evento
      2: e.preventDefault() evita que el href sea llamado, luego puedes acceder al atributo con this.href si requieres hacer un redirect o algo :D

      Eliminar
    9. genial muchas gracias ha sido increíblemente útil tu ayuda gracias por tu buena voluntad Wuilliam eres seco!

      Eliminar
  14. Buenas Noches, sabes como hacer lo mismo pero en un canvas de flash? resulta que la estoy creando totalmente en flash, pero quisiera que en el js que crea esta instancia al dar clic en un boton desplazara la imagen a un lugar especificio de esa misma pantalla, digamos para que se vea un texto mas abajo, pero no he podido logra como hacerlo.

    ResponderEliminar
    Respuestas
    1. intente asi:

      this.inicio.addEventListener("click", fl_MouseClickHandler_3.bind(this));

      function fl_MouseClickHandler_3()
      {
      $('html,body').animate({
      scrollTop: $("#scrollToHere").offset().top
      }, 2000);
      }

      pero no encontre donde colocar el identificador

      Eliminar
    2. Oye amigo me gustaria mucho ayudarte, pero mi conocimiento de Flash es 0%. Lo que te puedo decir es, 1. Ve migrando a HTML5, jeje, 2. Te puedo ayudar mas, si me pasas un poco mas de codigo a ver como lo tienes descrito y ver si te puedo dar una mano con eso.

      Gracias por escribir. Saludos!

      Eliminar
  15. Hola me ha servido muy bien, Gracias.
    Estoy utilizandolo para un menú para, que cada vez que alguien presione el link del menú lo desplace al contenido, mi pregunta es ¿como hago que se dentenga para que solo se desplace por determinadas lineas?.
    De antemano Gracias

    ResponderEliminar
    Respuestas
    1. Bueno, eso seria otro plugin, habria que cambiar otras cosillas, deberias definir el numero de lineas que vas a moverte, no se, definir el tama#o de una linea, y desarrollarte un plugin para eso!. Tendrias que contarme mejor tu caso para ayudarte mas :D

      Eliminar
  16. oye tego una pregunta este codigo utiliza alguna libreria jQuery para que funcione?

    ResponderEliminar
  17. Vale la pena comentar este tipo de articulo no solo por bueno que es si por la gran ayuda que tenemos algunas personas que no sabemos muchos pero tenemos las ideas pero no sabemos como implementarlas muchas gracias.

    ResponderEliminar
  18. Soy hobbiero en éstas tecnologías, y aunque me mate el coco un par de horas desglozanDo su Código, logré al fin programarlo desde Html como lo quería, por medio desta motivante lectura.
    Gratitud & Bendiciónes en sus labores profesionales Mr.Cruz

    ResponderEliminar
  19. Muchas gracias por esta solución. Es muy práctica y con formato profesional. Me ha gustado mucho y queria agradecer tu esfuerzo haciéndote saber que resulta útil que dediques tu tiempo a esto, pues nos sirve a todos.

    Cabe decir, a quien no lo sepa, que se llama a un Java Script externo y que se puede copiar y guardar en la carpeta de nuestra página para tener todo eel código.

    ResponderEliminar
  20. Gracias hermano, algún día nos pueden ser de ayuda estas líneas que parecen tontas, pero que en realidad quiebran la cabeza a más de uno. Excelente aporte

    ResponderEliminar
    Respuestas
    1. Añado, lo usé para mostrar un mensaje, pero se me posicionaba al final del Div, por lo cual tuve que colocar un div de referencia antes de mostrar el mensaje (esta oculto y sale cuando ocurre un evento); este div de referencia me servía para posicionarme justo en el lugar que ya era visible el Div que me contenía el mensaje. Muchas gracias. Sencillo y bien explicado.

      Eliminar
  21. Que bueno que les haya servido. Gracias por el comentario!

    ResponderEliminar
  22. Hola amigo lo intento usar en una web responsive y si sirve en la pc pero en el movil no hace nada gracias

    ResponderEliminar
  23. Excelente, exquisito!!! simple y funciona a la perfección, lo estaba necesitando mil gracias por este aporte WLacruz

    ResponderEliminar
  24. Necesito hacerlo sin click, es decir:

    Cuando redireccione a una sitio, una vez dentro que pase unos segundos y se desplace a un lugar en especifico...gracias desde México. Rafael J

    ResponderEliminar
    Respuestas
    1. Saludos rafael, necesitas esto: http://plnkr.co/edit/jxSeT4nuOlVfjJwaLAYb?p=preview

      Eliminar

Cuando deje su comentario NO OLVIDE dejar su Nombre