Menu

Todo lo relacionado a Internet, Programación y Tecnología

Plugin para hacer Scroll o desplazamiento suave hacia un elemento - jQuery.scrollTo

Los enlaces HTML <a> ademas de dirigirnos a una nueva página u otra página de nuestro sitio, también nos sirve para desplazarnos por una misma página a otras secciones.

Ejemplo para desplazarnos a una sección de una página solo con HTML:

<a href="#comentarios">Ir a los comentarios</a>
<p>Mucho texto...</p>

<div id="comentarios">Muchos comentarios...</div>

De esta manera el navegador nos desplaza a la sección de forma instantánea. Pero para lograrlo con un efecto suave de desplazamiento necesitamos usar un plugin para jQuery llamado jQuery.scrollTo.

papel de desplazamiento antiguo

Ejemplo de uso real

Su uso es bastante sencillo, en la función scrollTo que usaremos a continuación el primer argumento es el ID del elemento al que se desplazara, antes de la función la parte que dice 'html,body' es el documento o sección por la cual se desplazara, y en el segundo argumento de la función como un objeto la lista de opciones. Para los que no están familiarizados con jQuery, $('.link').click el selector .link es la clase CSS del elemento que activara el desplazamiento y animación.

JavaScript (jquery, scrollto, javascript):

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script>
(function($) {
    $('.link').click(function(){
         $('html,body').scrollTo('#comentarios',{
             axis: 'xy',
             duration: 800
         });
         return false;
    });    
})(jQuery);;
</script>

HTML:

<a class="link" href="#ir">desplazar a comentarios</a>
<p>mucho texto...</p>
<!-- ... -->
<div id="comentarios">comentarios</div>

Resumido:

  • .link, la clase del elemento que se accionara con un clic para empezar el desplazamiento.
  • html,body, elemento por el cual se hará el desplazamiento.
  • #comentarios, elemento al cual se dirigirá el desplazamiento.
  • {...}, opciones del plugin.
  • return false, se usa para que al hacer clic en un enlace este no cambie la URL del navegador con un #.

Opciones y descripción (solo se incluyen algunas):

  • axis: los ejes a animar, x, y, yx.
  • duration: la duración de la animación, en milisegundos.
  • interrupt: cancela la animación si el usuario hace scroll antes de que la animación termine, true | false. Las demás opciones las podemos encontrar en la página oficial en Github.

Notas

El elemento que inicia el desplazamiento puede ser cualquier tipo de elemento y no solo un enlace. Se puede usar el primer ejemplo en HTML combinado con el plugin para que quede como Fallback en caso de que algo no funcione como se esperaba, o para cuando el usuario no tenga JavaScript activado.

En Github.

Written by Alan on Saturday April 14, 2018

Enlace permanente - categoría: Programación - etiquetas: html, javascript, jquery

« Manejo de servicios - Start, Stop, Restart en Debian - Seleccionar un elemento que tenga varias clases CSS »