Imagen subir arriba dinámica

Posiblemente leyendo el título de este nuevo post de El Blog de la Informática 10 no os quede muy claro lo que os voy a explicar hoy, pero como una imagen vale más que mil palabras os pondré un ejemplo. Acceded a la web de Decathlon … ¿veis la imagen que aparece en la esquina inferior derecha de la ventana cuando os desplazáis hacia abajo? … pues eso, precisamente eso, es a lo que me refiero con el título Imagen subir arriba dinámica.

Como podéis comprobar al hacer clic sobre ella, nos permite volver al inicio de la página una vez que nos hemos desplazado ligeramente hacia abajo de la ventana. También como es normal, si estamos arriba del todo no aparece, puesto que más arriba no podemos ir.

Esto en cierta parte, lo expliqué en el post Insertar imagen fija en blog, pero al contrario que esta vez, aquella imagen se quedaba fija, no aparecía y desaparecía en función de la posición en la que nos encontráramos de la ventana.

Para empezar, accedemos a la categoría Plantilla de nuestro blog en Blogger y hacemos clic sobre Editar HTML. Lo primero y como siempre recomendable cuando vayamos a modificar la plantilla , hacer una copia de seguridad de la plantilla del blog por si ocurriera algún fallo o no nos gustara el resultado final.

Realiza la copia de seguridad, buscamos en el código de la plantilla la etiqueta </head> y pegamos justo antes de ella el siguiente código:

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

A continuación, buscamos el código ]]></b:skin> y justo antes pegamos lo siguiente:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 15px;
right: 15px; 
}
#IrArriba span {
width: 60px; 
height: 60px; 
display: block;
background: url(http://qgpmxq.blu.livefilestore.com/y2phD4zMPvoFY84bVz9tNaiXhz5TN48gQ6r_Oe5s0NS8qmiLWxP6yDnNlJA_tLziftIbrKnwzJqjy5Qq3wUG-20unyscQweLnF6_FAnWjrbYzc/flecha-arriba-josem2112.png) no-repeat center center;
}

Por último, buscamos la etiqueta </body> y antes de la misma pegamos lo siguiente:

<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
//]]>
</script>

Guardamos los cambios realizados en la plantilla y, si todo ha ido bien, no debería haber ningún error y el resultado debería ser el siguiente.

Una cosa más antes de terminar, podéis personalizar la imagen e incluir la que queráis. Para ello, solo tenéis que escribir la URL de la imagen en el segundo código que hemos pegado en la propiedad Background, incluso si sois un poquito apañados podéis crear vosotros la vuestra propia con Photoshop o programa similar.

*** Descarga el código explicado en este post “Imagen subir arriba dinámica”