Cómo poner un botón de “subir arriba”… con efecto deslizante

¡Toca post invitado! :)

De la mano de Mónica, hoy vamos a aprender cómo, la flechita o botón de subir arriba (si no tenéis ya una, podéis poner una en vuestro blog en menos de un minuto siguiendo este tutorial), puede tener un efecto deslizante o scroll. 

Para que veáis lo que me refiero, id hasta el final de la página de la página de mi blog y pinchad luego en el botón de subir. 

Veréis que sube de golpe, como por arte de magia. 

Ahora, id hasta el final de la página del blog de Mónica, y pinchad en su flechita de subir. 

Veréis que sube, pues eso... ¡con efecto deslizante o scroll!

Os dejo que ella os lo cuente, que se explica muy bien :)

Nota: Este es un post invitado. No está escrito por mí, pero me ha parecido interesante compartirlo en Personalización de Blogs.

POST INVITADO

Hola a todos.

Soy Mónica de Cortar, Coser y Crear y hoy me tenéis en… ¡Personalización de Blogs!

¡Qué ilusión! No sabéis lo que me apetecía colaborar en el blog de Blanca. La de veces que habré entrado buscando trucos para mejorar mi blog o para leer sus consejos y recomendaciones blogueras. Gracias a ella me adentré un poco en el mundo del html, y ahora hasta me atrevo, de vez en cuando, a probar cosas nuevas en el blog. Entre todas esas cosas hay algo que aprendí recientemente, que me ha encantado y que estoy segura de que os va a gustar, así que he pensado en compartirlo con vosotras.

Os cuento un poco la historia de este descubrimiento. Seguro que os acordáis de la entrada de Blanca dónde nos enseñaba cómo crear e insertar un botón de "Subir arriba" en el blog. Además nos regalaba un montón de imágenes superchulas para el botón. De hecho la de mi blog es una de las suyas (¡gracias Blanca!). 

En el tutorial Blanca nos explica en sencillos pasos cómo hacer el botón "Subir arriba". En este caso, el efecto que tenemos al pinchar en el botón es el normal, una transición instantánea a la cabecera del blog. Sin embargo, yo había visto en otras webs, efectos diferentes pinchar en botones similares. Concretamente, si pinchabas en el botón, la página del blog se desplazaba suavemente hasta la cabecera… se deslizaba hasta la parte de arriba con un elegante efecto propio del más digno ordenador de Apple :-P Es una chorrada, pero ¡me encantó! Y poquito a poquito, con muchas chorradas varias, el diseño de nuestro blog mejora :-)

Así que me puse a buscar y a buscar, y hoy os quiero enseñar cómo poner un botón de "Subir arriba" con un efecto elegante.



PASO 1

Lo primero que tenéis que hacer es instalar un botón de los que nos daba Blanca o crear uno vosotras mismas si sabéis Ah, ¿que ya lo tenéis? Pues sigamos entonces.

PASO 2

Aquí tenemos que usar uno poco de html, pero muy sencillo, ya veréis. En concreto, usaremos un pequeño código JQuery que es una extensión del lenguaje de programación Javascript. Dicho esto (que queda muy cool, pero no os ayuda mucho), pasemos a lo interesante. Para hacerlo solo tendremos que:

✎ Ir a Plantilla.

✎ Crear una copia de seguridad de la plantilla (por si rompemos algo :-P).

✎ Ir a Editar HTML.

✎ Ahora tenemos que buscar la cadena de texto </body> en la plantilla del blog (con Ctrl+f por ejemplo). Y poner justo encima el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>

   $(function () {

   $(&#39;.go-to-top&#39;).click(function () {

   $(&#39;html,body&#39;).animate({

   scrollTop: 0

    }, 500);

   return false;

    });

    });

</script>

Si en vuestro código ya tenéis una línea <script> con un jquery.min.js, entonces no hace falta que pongáis la primera linea. Si no lo sabéis, pues ponedla que no ocurre nada.

✎ Guardamos y salimos

PASO 3

En este último paso, modificaremos el gadget HTML de nuestro botón "Subir arriba". Y lo que tenemos que hacer es:

✎ Ir a Diseño.

✎ Buscar y pinchar en editar el HTML del gadget de vuestro botón.

✎ Ahora simplemente tendremos que añadir sobre el código existente de nuestro botón, el código que os pongo en rojo a continuación:

Botón de muestra original

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="url de la imagen del botón" /></a>

Botón de muestra modificado

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#wrap" title="Subir arriba" class="go-to-top"><img src="url de la imagen del botón" /></a>

Y ya está. Ya lo tenemos hecho :-). Espero que os haya gustado y que lo encontréis chulo y fácil de hacer.

¡Un besazo y hasta la próxima!

Mónica.

¡Mil millones de gracias Mónica por el tutorial!

Ya sabes que eres bienvenida cuando quieras por aquí a contarnos más cosas jeje. Con explicaciones como las vuestras da gusto siempre.

Besos,

P.D. ¡¡No olvidéis que seguimos de sorteo!!

Si alguien quiere ganar un mini-lote de tres productos Mr. Wonderful, que no se pierda este post con las instrucciones sobre cómo participar (¡no podría ser más fácil además!)