Es común encontrar en páginas que muestran mucho contenido, en especial aquellas que manejan grandes cantidades de texto, enlaces que nos permiten regresar al tope inicial de la página sin necesidad de utilizar el scroll. Estos enlaces tratan de mejorar la experiencia del usuario al visitar el sitio, permitiéndoles navegar más fácilmente y agregando una opción más para obtener una vista rápida de lo que se recorrió.
En este artículo, vamos a elaborar un plugin de jQuery que nos permita implementar enlaces de este tipo en nuestras páginas. Este plugin contendrá una funcionalidad muy básica, pero nos permitirá obtener el comportamiento que deseamos, además de que nos permitirá aprender un poco sobre como estructurar de manera adecuada un plugin.
Estructura HTML
Como siempre, lo primero que debemos agregar a nuestro sitio es la estructura HTML de la página que utilizaremos para aplicar la funcionalidad. Para este caso, podemos utilizar una estructura muy sencilla, la cual integre dentro de su etiqueta “head” la librería jQuery, el llamado al código con el plugin que crearemos y al archivo css que dará el estilo.
<title>Plugin demo</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="plugin_enlace_arriba.js"></script> <link rel="stylesheet" href="estilo_enlace_arriba.css">
Sin un contenido lo suficientemente grande, no podríamos hacer el recorrido, por lo que se recomienda utilizar un texto bastante amplio, dividido por párrafos y añadido a la etiqueta “body”. Estos nos permitirá observar de mejor manera la acción de recorrido al dar clic sobre el enlace.
Finalmente cerramos el body, no sin antes agregar un enlace que será el que reciba el evento, que disparará el javascript que disparará la acción de subir al inicio de la página.
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio justo, egestas nec tempor in, mollis vitae mi. Etiam nec nulla sit amet est posuere elementum. Sed pretium est eget odio molestie bibendum. Ut sodales quam et nunc tempor sit amet rutrum nunc pulvinar. Etiam facilisis lacinia risus, eu fringilla orci molestie vitae. Sed sit amet massa velit, ac fermentum turpis. Duis vel interdum mi. Sed tincidunt nibh tortor, vitae feugiat dui. Maecenas vestibulum urna et felis suscipit eget semper ante ultricies. Curabitur ac enim mauris, quis lacinia nisi. Nam in semper quam.</p>
...
<a class="enlaceScroll" href="">Volver al inicio</a>
<script>
$(function(){
$(".enlaceScroll").irAlInicio();
});
</script>
</body>
Como se puede apreciar en el código, dentro del evento ready de jQuery, hemos agregado el llamando al plugin titulado “irAlInicio”. Éste plugin aún no se encuentra creado, por lo que el siguiente paso lógico es su creación.
Estructura básica del plugin
Crearemos un archivo al que llamaremos “plugin_enlace_arriba.js”, dentro de este incluiremos el código necesario para crear y adaptar el plugin “irAlInicio”. El requisito básico para la creación de un plugin con jQuery, es definirlo dentro del objeto $.fn, y eso se logra de la siguiente manera:
(function($){
$.fn.irAlInicio = function(){
this.click(function(event){
$("html, body").animate({scrollTop: 0}, 1000);
event.preventDefault();
});
return this;
}
})(jQuery)
Dentro de la función, “this” hace referencia a los elementos que hemos seleccionado para aplicarles la acción que el plugin realizará, lo que en este caso sería el enlace que agregamos al final del texto. Agregamos un controlador de eventos “click”, el cual se encargará de identificar el momento en que el elemento de enlace reciba el clic por parte del usuario, para después realizar la acción que se define dentro de su función.
La función que se encuentra definida dentro del evento, engloba mediante un selector, los elementos html y body de la página, a los cuales les aplica un efecto de animación de jQuery mediante la sentencia “.animate”.Ésta a su vez recibe 2 parámetros, los cuales indican que la propiedad scrollTop debe irse a 0, es decir hasta el inicio de la página, a una velocidad de 1000 milisegundos, es decir en 1 segundo.
Podrán notar que dentro de esta funcionalidad, también hicimos uso de esta sentencia “event.preventDefault();”, a grandes rasgos, esta línea de código evita que la funcionalidad por default del enlace se active, al momento en que el usuario da clic sobre él.
Estilo al enlace
Hasta el momento nuestro enlace luce como un elemento estático localizado hasta el final del texto, la única forma de acceder a él es desplazarnos hasta ese punto para poder regresar al inicio. Que el usuario este leyendo la información que presentamos, no necesariamente significa que terminará de leerla, por lo que dejar en enlace inmóvil hasta el final de la página, resta puntos a la experiencia que este recibe. Para lograr un mejor resultado, se puede adaptar un estilo que permita al enlace “flotar” y siga el curso de la barra de desplazamiento, siempre localizándolo en la parte inferior de la pantalla.
Para lograr esto, se puede optar por agregar la siguiente línea antes del return de nuestra función:
this.css({"bottom": "20px", "right": "20px", "position": "fixed"});
Pero para hacerlo un poco más interesante, podemos hacer uso de los atributos data dentro de nuestro código HTML. Estos atributos nos permiten mover la posición de un elemento, haciendo uso de HTML5 y JavaScript, agregando un poco de elegancia al código, evitando introducir valores directamente en el plugin.
<a class="enlaceScroll" data-position="fixed" data-bottom="20px" data-right="20px" href="">Volver al inicio</a>
Para obtener la información de la estructura HTML, basta con utilizar el atributo data y mandarlo como parámetro del método .css de jQuery. De esa manera nos evitamos tener que pasar cada uno de los valores por separado.
(function($){
$.fn.irAlInicio = function(){
this.click(function(event){
$("html, body").animate({scrollTop: 0}, 1000);
event.preventDefault();
});
this.css(this.data());
return this;
}
})(jQuery)
En caso de que quisiéramos agregar otro link del otro lado de la pantalla, bastaría con agregar otro enlace con valores distintos.
<a class="enlaceScroll" data-position="fixed" data-bottom="20px" data-left="20px" href="">Volver al inicio</a>
Y modificar nuestro plugin para que acepte varios elementos.
(function($){
$.fn.irAlInicio = function(){
return this.each(function(){
$(this).click(function(event){
$("html, body").animate({scrollTop: 0}, 2000);
event.preventDefault();
});
$(this).css($(this).data());
});
}
})(jQuery)
Esconder el enlace
Con el código que tenemos hasta ahora, podemos llevar a cabo la acción deseada, pero existe un pequeño problema, el enlace esta siempre visible. Para agregar valor a la presentación, podemos esconder momentáneamente el enlace, hasta que el usuario se desplace un poco hacia abajo. Para lograr debemos agregar utilizar un valor default, el cual indique el limites a partir del cual empezaremos a utilizar el enlace.
(function($){
$.fn.irAlInicio = function(){
return this.each(function(){
$(this).click(function(event){
$("html, body").animate({scrollTop: 0}, 2000);
event.preventDefault();
});
$(this).css($(this).data());
$(this).hide();
$(window).scroll(function(){
if ($(window).scrollTop() > 400) {
$(this).fadeIn();
}else{
$(this).hide();
};
});
});
}
})(jQuery)
modificado el 30 septiembre, 2017 12:30