Cuando tenemos p\u00e1ginas muy extensas con mucho contenido gener\u00e1ndose mucho scroll es muy \u00fatil para el usuario proporcionarle un bot\u00f3n de subida al top o cima de la p\u00e1gina. Existen muchos plugins para realizar esta acci\u00f3n. En este art\u00edculo vamos a ver como disponer de este bot\u00f3n con jQuery sin utilizar plugins.<\/p>\n
El c\u00f3digo que vamos a ilustrar puede ser incluido en las plantillas de WordPress, Prestashop, Magento, etc sin necesidad de a\u00f1adir m\u00f3dulos extra o plugins.<\/p>\n
Como podemos a\u00f1adirlos en nuestras webs sin necesidad de plugins?<\/p>\n
Lo primero ser\u00e1 a\u00f1adir el link que har\u00e1 de bot\u00f3n (flecha arriba). Yo lo suelo poner justo por encima de la etiqueta de cierre del <body>.<\/p>\n
<a href=\"#\" class=\"scrolltop\"><\/a><\/pre>\nDentro de la cabecera de tu p\u00e1gina a\u00f1ade la librer\u00eda jQuery si no la tienes ya y los scripts que har\u00e1n toda la funcionalidad que se pretende:<\/p>\n
<script type=\"text\/javascript\" src=\"..\/jquery.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(window).scroll(function(){\r\n\u00a0\u00a0 \u00a0if ($(this).scrollTop() > 100)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('.scrolltop').fadeIn();\r\n\u00a0\u00a0\u00a0 else\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('.scrolltop').fadeOut();\r\n});\r\n\r\n$(document).ready(function(){\r\n\u00a0\u00a0 \u00a0$('.scrolltop').click(function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"html, body\").animate({ scrollTop: 0 }, 600);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return false;\r\n\u00a0\u00a0 \u00a0});\r\n})\r\n<\/script><\/pre>\nEn el c\u00f3digo jQuery que vamos a a\u00f1adir por un lado tenemos el control del visualizado del bot\u00f3n observando la posici\u00f3n del scroll. Cuando sea mayor a 100px lo hacemos aparecer y cuando no desaparecer y, por otro lado, tenemos el control del bot\u00f3n que tras pulsarlo subimos a la cima con efecto animaci\u00f3n.<\/p>\n
Despu\u00e9s le damos un poco de estilo a nuestro bot\u00f3n:<\/p>\n
.scrolltop {\r\n\u00a0\u00a0 \u00a0background-image: url(\"arrow.png\");\r\n\u00a0\u00a0\u00a0 background-repeat: no-repeat;\r\n\u00a0\u00a0\u00a0 bottom: 20px;\r\n\u00a0\u00a0\u00a0 display: none;\r\n\u00a0\u00a0\u00a0 height: 50px;\r\n\u00a0\u00a0\u00a0 left: auto;\r\n\u00a0\u00a0\u00a0 overflow: hidden;\r\n\u00a0\u00a0\u00a0 padding: 17px 16px;\r\n\u00a0\u00a0\u00a0 position: fixed;\r\n\u00a0\u00a0\u00a0 right: 20px;\r\n\u00a0\u00a0\u00a0 top: auto;\r\n\u00a0\u00a0\u00a0 width: 55px;\r\n\u00a0\u00a0\u00a0 z-index: 90;\r\n}<\/pre>\nEn el caso del ejemplo en funcionamiento estamos utilizando una imagen posicionada a 20px a la derecha y abajo en posici\u00f3n fija. Editando la clase CSS anterior podr\u00e1s cambiar el aspecto del bot\u00f3n.<\/p>\n