El bot\u00f3n de volver\u00a0arriba es algo que muchos de\u00a0vosotros probablemente hay\u00e1is visto en\u00a0diferentes sitios web.\u00a0Se trata de una flecha que aparece en la esquina inferior derecha de la p\u00e1gina web cuando empiezas a desplazarte. Cuando se hace clic en ella, se vuelve a la parte superior de la p\u00e1gina.<\/p>\n
Si\u00a0quieres a\u00f1adir\u00a0el bot\u00f3n \"Ir arriba\" a tu\u00a0sitio web, o simplemente\u00a0te interesa c\u00f3mo crear uno por tu cuenta, has llegado al lugar correcto.<\/p>\n
Nuestro c\u00f3digo constar\u00e1 de dos partes:\u00a0un estilo de CSS y un peque\u00f1o script de jQuery. Comencemos con CSS.<\/p>\n
Comenzamos\u00a0con la creaci\u00f3n de\u00a0estilos y marcas para nuestro bot\u00f3n. Aqu\u00ed est\u00e1 la parte de HTML:<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.5.0\/css\/font-awesome.min.css\">\r\n\r\n<a id=\"button\"><\/a>\r\n\r\n<\/pre>\nEl bot\u00f3n tendr\u00e1\u00a0una sola etiqueta de anclaje con\u00a0ID
button<\/code>. Tambi\u00e9n incluimos un enlace a la biblioteca FontAwesome para que podamos usar un icono para nuestro bot\u00f3n.<\/p>\nLos estilos iniciales para el bot\u00f3n se ver\u00e1n as\u00ed:<\/p>\n
#button {\r\n display<\/span>: <\/span>inline-block<\/span>;\r\n <\/span>background-color<\/span>: <\/span>#FF9800<\/span>;\r\n <\/span>width<\/span>: <\/span>50<\/span>px<\/span>;\r\n <\/span>height<\/span>: <\/span>50<\/span>px<\/span>;\r\n <\/span>text-align<\/span>: <\/span>center<\/span>;\r\n <\/span>border-radius<\/span>: <\/span>4<\/span>px<\/span>;\r\n <\/span>margin<\/span>: <\/span>30<\/span>px<\/span>;\r\n <\/span>position<\/span>: <\/span>fixed<\/span>;\r\n <\/span>bottom<\/span>: <\/span>30<\/span>px<\/span>;\r\n <\/span>right<\/span>: <\/span>30<\/span>px<\/span>;\r\n transition: background-color <\/span>.3<\/span>s<\/span>;\r\n <\/span>z-index<\/span>: <\/span>1000<\/span>;<\/span><\/pre>\n}\r\n#button:hover {\r\n cursor: pointer;\r\n background-color: #333;\r\n}\r\n#button:active {\r\n background-color: #555;\r\n}\r\n\r\n<\/pre>\nComo el bot\u00f3n es un elemento de anclaje, y los anclajes por defecto son elementos en l\u00ednea, necesitamos cambiar la propiedad \u00a0
display<\/code>\u00a0al bloque en l\u00ednea para que podamos asignarle dimensiones.<\/p>\nHagamos que sea un bot\u00f3n cuadrado de 50*50px con esquinas redondeadas de 4px.\u00a0Lo haremos\u00a0del color naranja brillante y con un margen de 30 p\u00edxeles\u00a0por cada lado.<\/p>\n
La posici\u00f3n fija\u00a0deja que nuestro bot\u00f3n siempre permanezca en el mismo lugar cuando desplazamos por la p\u00e1gina, y
z-index<\/code>\u00a0de un n\u00famero muy alto asegura que el bot\u00f3n siempre se\u00a0coloca por encima de\u00a0otros elementos del sitio web.<\/p>\nCuando pasamos el cursor sobre\u00a0este bot\u00f3n, el cursor se cambia a un puntero y el fondo se vuelve gris oscuro. Para facilitar la transici\u00f3n, asignamos la transici\u00f3n de 0,3 segundos a la propiedad
background-color<\/code>. Adem\u00e1s, cuando hacemos clic en el bot\u00f3n, el color de fondo tambi\u00e9n se cambia y se vuelve un poco m\u00e1s claro.<\/p>\n
\nAdici\u00f3n del icono<\/h3>\n
Por el\u00a0momento nuestro bot\u00f3n est\u00e1 vac\u00edo, as\u00ed que, vamos a a\u00f1adir un icono. Lo hacemos\u00a0al a\u00f1adir un pseudo-elemento\u00a0
::after<\/code>\u00a0de la siguiente manera:<\/p>\n#button::after {\r\n content: \"\\f077\";\r\n font-family: FontAwesome;\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 2em;\r\n line-height: 50px;\r\n color: #fff;\r\n}\r\n\r\n<\/pre>\nVamos a elegir un icono de la biblioteca de fuentes m\u00e1s popular FontAwesome<\/a>.\u00a0En este caso optamos por\u00a0un icono de Chevron Up<\/a>.<\/p>\n
Para mostrarlo en un pseudo-elemento, establece\u00a0
font-family<\/code>\u00a0como FontAwesome y asigna el valor Unicode de tu icono a la propiedadcontent<\/code>.<\/p>\nTambi\u00e9n aseg\u00farate de que la altura de tu l\u00ednea sea igual a la altura de tu icono si deseas que se centre horizontalmente.<\/p>\n
\nAdici\u00f3n de la funcionalidad con jQuery<\/h3>\n
En esta subsecci\u00f3n te mostraremos c\u00f3mo hacer que el bot\u00f3n funcione como se espera. La forma m\u00e1s sencilla de lograr esto es utilizar una biblioteca JavaScript jQuery. En primer lugar, debemos a\u00f1adir jQuery al\u00a0HTML de nuestro c\u00f3digo. A\u00f1ade\u00a0la siguiente l\u00ednea de c\u00f3digo justo antes de la etiqueta de cierre
body<\/code>.<\/p>\n<script src=\u201dhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\u201d><\/script>\r\n<\/pre>\nAhora podemos escribir nuestro script usando la sintaxis de jQuery. Agrega la siguiente secuencia de comandos despu\u00e9s de la l\u00ednea de jQuery:<\/p>\n
<script>\r\n\r\njQuery(document).ready(function() {\r\n \r\n var btn = $('#button');\r\n\r\n $(window).scroll(function() {\r\n if ($(window).scrollTop() > 300) {\r\n btn.addClass('show');\r\n } else {\r\n btn.removeClass('show');\r\n }\r\n });\r\n\r\n btn.on('click', function(e) {\r\n e.preventDefault();\r\n $('html, body').animate({scrollTop:0}, '300');\r\n });\r\n\r\n});\r\n\r\n<\/script>\r\n\r\n<\/pre>\nExaminemos este script.<\/p>\n
Presta atenci\u00f3n a\u00a0la primera l\u00ednea de c\u00f3digo:<\/p>\n
jQuery(document).ready(function() {\r\n<\/pre>\nB\u00e1sicamente se trata de\u00a0que se ejecute\u00a0el c\u00f3digo dentro de esta funci\u00f3n s\u00f3lo cuando el documento est\u00e1 completamente cargado. Esta es una gran manera de evitar errores, en caso de que tu c\u00f3digo JavaScript quiera realizar cambios en las partes de la p\u00e1gina web que no est\u00e1n completamente cargadas en el navegador.<\/p>\n
El c\u00f3digo que\u00a0se ejecuta despu\u00e9s de que el documento est\u00e1 completamente cargado consta de dos partes principales\u00a0y cada una de ellas est\u00e1 haciendo lo suyo.<\/p>\n
La primera parte del script hace que nuestro bot\u00f3n aparezca y desaparezca despu\u00e9s de que\u00a0se desplace\u00a0por la p\u00e1gina\u00a0hasta un cierto punto. La segunda parte hace que la p\u00e1gina se\u00a0vuelva a\u00a0la parte superior despu\u00e9s de hacer clic en el bot\u00f3n. Examinemos cada una en detalle.<\/p>\n
\nHacer que el bot\u00f3n aparezca y desaparezca<\/h4>\n
Este es el c\u00f3digo que hace el truco:<\/p>\n
var btn = $('#button');\r\n\r\n $(window).scroll(function() {\r\n if ($(window).scrollTop() > 300) {\r\n btn.addClass('show');\r\n } else {\r\n btn.removeClass('show');\r\n }\r\n });\r\n\r\n<\/pre>\nPrimero\u00a0configuramos una variable btn y la asignamos a un elemento con una ID de
button<\/code>, de modo que sea m\u00e1s f\u00e1cil para nosotros referirnos a ella\u00a0luego en el c\u00f3digo. Tambi\u00e9n esto ayuda a JavaScript a hacer c\u00e1lculos m\u00e1s r\u00e1pido. Una vez que almacenamos el elemento en una variable, JavaScript no necesitar\u00e1 buscar\u00a0por toda la p\u00e1gina una y otra vez, cada vez que necesitemos usarlo de nuevo en nuestro c\u00f3digo.<\/p>\n.scroll()<\/a><\/strong><\/em><\/p>\n
jQuery tiene una funci\u00f3n\u00a0\u00fatil
.scroll()<\/code>. Lo que hace es vincular una pieza de c\u00f3digo que se ejecutar\u00e1 cada vez que ocurre un evento de desplazamiento en tu p\u00e1gina web.\u00a0Tiene un par\u00e1metro que es una funci\u00f3n que se ejecuta cada vez que\u00a0se ocurre un desplazamiento por la p\u00e1gina. Aunque puedes aplicarla a cualquier elemento desplazable, como marcos y elementos con propiedades de desbordamiento, generalmente la aplicamos al elemento de ventana, ya que es ah\u00ed donde se\u00a0realiza el desplazamiento en la mayor\u00eda de los casos.<\/p>\n$(window).scroll(function() {\r\n<\/pre>\nDentro de la funci\u00f3n colocamos esta declaraci\u00f3n if\/else:<\/p>\n
if ($(window).scrollTop() > 300) {\r\n btn.addClass('show');\r\n } else {\r\n btn.removeClass('show');\r\n }\r\n\r\n<\/pre>\nLo que intentamos hacer aqu\u00ed es verificar la posici\u00f3n vertical de la barra de desplazamiento y hacer que nuestro bot\u00f3n aparezca cuando est\u00e1 por debajo de cierto punto, y desaparecer cuando est\u00e1 por encima de ese punto.<\/p>\n
Para obtener la posici\u00f3n actual de la barra de desplazamiento, vamos a utilizar un m\u00e9todo incorporado de jQuery .scrollTop()<\/a>. No toma ning\u00fan argumento, y simplemente devuelve una cantidad de p\u00edxeles que est\u00e1 oculta sobre el \u00e1rea desplazable.<\/p>\n
Entonces, cada vez que desplazamos, JavaScript verifica cu\u00e1ntos p\u00edxeles est\u00e1n ocultos y los compara con\u00a0el n\u00famero determinado. En nuestro caso, ese n\u00famero\u00a0es 300, pero puedes cambiarlo si lo deseas.<\/p>\n
Si pasamos por 300px, agregamos una clase\u00a0
show<\/code>\u00a0a nuestro elemento de bot\u00f3n, que lo har\u00e1 aparecer. Si el n\u00famero es menor\u00a0de 300, eliminamos esa clase. Agregar y eliminar clases es otra raz\u00f3n por la cual jQuery es tan popular. Podemos hacerlo con dos m\u00e9todos simples\u00a0addClass()<\/code>\u00a0y\u00a0removeClass()<\/code>.<\/p>\nSin embargo, todav\u00eda no tenemos la clase
show<\/code>\u00a0en nuestro CSS, as\u00ed que, vamos a agregarla:<\/p>\nif ($(window).scrollTop() > 300) {\r\n btn.addClass('show');\r\n } else {\r\n btn.removeClass('show');\r\n }\r\n\r\n<\/pre>\nDe manera predeterminada\u00a0nuestro bot\u00f3n\u00a0estar\u00e1 oculto, por lo que tendremos que agregar algunas reglas m\u00e1s al elemento
#button<\/code>\u00a0:<\/p>\n#button<\/span> {\r\n transition: background-color <\/span>.3<\/span>s<\/span>, \r\n opacity <\/span>.5<\/span>s<\/span>, visibility <\/span>.5<\/span>s<\/span>;\r\n <\/span>opacity<\/span>: <\/span>0<\/span>;\r\n <\/span>visibility<\/span>: <\/span>hidden<\/span>;\r\n}<\/span><\/pre>\nPara facilitar la transici\u00f3n, a\u00f1adimos dos valores m\u00e1s a los atributos de la transici\u00f3n, la opacidad y visibilidad\u00a0se establecen como 0.5 segundos.<\/p>\n
\nDesplazarse hacia la parte superior<\/h4>\n
La segunda parte del script te permite desplazarte\u00a0hacia la parte superior de la p\u00e1gina despu\u00e9s de\u00a0que hagas clic en el bot\u00f3n.<\/p>\n
btn.on(<\/span>'click'<\/span>, <\/span>function<\/span>(e) {\r\n e.preventDefault();\r\n <\/span>$<\/span>(<\/span>'html, body'<\/span>).animate({scrollTop:<\/span>0<\/span>}, <\/span>'300'<\/span>);\r\n });<\/span><\/pre>\n<\/pre>\nEl primer m\u00e9todo de jQuery que vemos aqu\u00ed es\u00a0on()<\/a>. Su primer par\u00e1metro es el evento de \"clic\" de JavaScript, que se produce cada vez que hacemos clic del rat\u00f3n en nuestro navegador. El segundo par\u00e1metro es una funci\u00f3n de controlador, que se activa tan pronto como ocurre el evento.<\/p>\n
La funci\u00f3n de controlador\u00a0requiere un par\u00e1metro de evento. Podemos darle cualquier nombre que queramos, pero usualmente se\u00a0usa e<\/em>\u00a0o\u00a0event<\/em>. Necesitamos el par\u00e1metro de evento para pasarlo a la funci\u00f3n y usarlo para el m\u00e9todo
preventDefault()<\/code>.<\/p>\nEl m\u00e9todo\u00a0
e.preventDefault()<\/code>\u00a0impide que la acci\u00f3n predeterminada del evento suceda, por ejemplo, un enlace no nos lleva a la p\u00e1gina siguiente. En nuestro caso no es crucial, ya que nuestro elemento delimitador falta el atributohref<\/code>\u00a0 y, de todos modos, no nos llevar\u00eda a una p\u00e1gina nueva, pero siempre es mejor verificarlo dos veces.<\/p>\n