Los enlaces HTML <a> además 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.
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 desplaza, antes de la función la parte que dice 'html,body' es el documento o sección por la cual se desplaza, 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 activará 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.
