Botón para "Ir arriba"

Habreis visto en muchas páginas un botón, normalmente con aspecto de flecha, que sirve para ir rápidamente al principio de la página correspondiente.

Para añadir esto a vuestro espacio, en primer lugar teneis que elegir/construir la imagen que os guste. Por convención, bueno más por costumbre que por convención, se suele usar una flecha apuntando hacia arriba.

La situaremos en un punto fijo, no de la página, sino de la parte de la misma que se ve en nuestra pantalla. Para ello usaremos en el estilo de la imagen, la expresión position:fixed. Con ella, la imagen no se moverá cuando nos desplacemos (scroll). Por último la pondremos en el punto concreto añadiendo la distancia al borde que deseemos.

El código hay que colocarlo detras de <head> y quedará similar a éste:

<a href="#"><img src="URLdeTUimagen" title="Ir al principio" style="position: fixed; bottom: 10px; left: 2%;" /></a>

Como veis se pueden mezclar distancias en pixels y distancias en tanto por ciento sobre el ancho total (o el alto). En este caso se ha puesto a 10 pixels de la parte inferior y a un 2% del lado izquierdo.

Actualización: Para un mejor resultado con Internet Explorer, mejor colocar el código justo antes de </body>

Si no quereis este efecto, hay que quitar el style y todo lo que lo que está tras el =. De esa manera, la imagen tendrá una posición "normal", y se desplazará al mismo tiempo que el resto del contenido.

Cuando se pincha la flecha, volvemos al principio de la página en la que estemos. Si se quiere que esa imagen nos lleve a otra dirección, entonces hay que sustituir el símbolo # por la dirección URL deseada.