Cierto es que no tengo demasiada idea de programación web, conozco algunos trucos, sé un poco de css y otro poco de html, lo suficiente como para que no me de miedo hurgar en las tripas del blog. Por eso, cuando he leido en Web Designer Wall, un gran blog para esto del diseño, una forma sencilla de incluir la típica flecha que te lleva al principio de una página, y encima de una forma elegante, me he dicho ¿Y por que no probarlo?
Dicho y hecho, me he puesto y en poco menos de 5 minutos he conseguido el resultado que puedes ver. Ahora lo que pretendo es explicarte de manera sencilla los pasos que hay que seguir para que tú también te atrevas a hacerlo en tu propia web o blog.
Lo primero es descargarte la demo que ofrecen en Web Designer Wall, ya que ahí se incluye el código y el dibujo de la flecha que vamos a utilizar.
Ahora abres el código de tu blog. Si utilizas WordPress como yo, nada más sencillo que ir al apartado de apariencia y luego al editor. Buscas el archivo CSS que generalmente se llama style.css. Con el CSS lo que hacemos es “maquetar” la apariencia de tu blog para que quede bonito, es donde suelen definirse los estilos de letra, el tamaño, color de fondo, márgenes, etcétera. Vas al final de tu archivo y añades la parte de css que viene en la demo, yo te la incluyo aquí para que no tengas que buscarla.
/*
Back to top button
*/
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(images/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
Las partes que te marco en negrita son para cambiar el fondo de tu botón y que lo pongas como mejor combine con tu blog. Si no sabes que colores usa tu blog, en esta útil herramienta los puedes averiguar. Dónde pone background: es la parte del color del fondo del botón seguido de la ruta del dibujo de la flecha en tu servidor (es importante que lo pongas bien para que el sistema lo encuentre). Si quieres, también puedes cambiar el icono de la flecha por otro que a ti más te guste, pero te aconsejo que si lo haces, respetes el tamaño del icono original de 108×108 pixeles para que no te lies. Recuerda guardar los cambios.
Una vez colocado el código CSS, vamos a poner la función que llama al jQuery. Busca un archivo que se llama header.php y lo abres. Ahora buscas la instrucción </head> y pones el siguiente código justo encima.
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”></script>
<script>
$(document).ready(function(){
// hide #back-top first
$(“#back-top”).hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$(‘#back-top’).fadeIn();
} else {
$(‘#back-top’).fadeOut();
}
});
// scroll body to 0px on click
$(‘#back-top a’).click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
Bien, aquí no necesitamos tocar nada. Esta función lo que hace es que al hacer click encima de la flecha esta haga que la web se desplace al principio de la página. Por último solo nos queda incluir la propia llamada a la función dentro de la página para que aparezca tu icono en la parte izquierda al desplazarnos hacia abajo.
Graba los cambios del archivo anterior, y ahora, dependiendo de dónde quieras poner la flecha, tendrás que buscar algún archivo más. Lo normal sería ponerlo en todas las páginas, por eso tendrás que buscar index.php, single.php y page.php para ponerlo en la página principal, en los artículos y en las páginas fijas que tengas respectivamente.
Aquí si que no te puedo ayudar sobre dónde colocar la función, así que haz como yo, utilizar el método de prueba/error y así lo pones dónde mejor te parezca. Aquí está el código:
<p id=”back-top”>
<a href=”#top”><span></span>Ir al principio</a>
</p>
Te aconsejo que si copias el código que yo he puesto aquí, primero lo pegues en un editor de texto plano, por si se cuela algún carácter raro y luego lo pases a tu código. Si tienes algún problema y yo puedo ayudarte no dudes en ponerlo en los comentarios. Suerte.