No se si hayan notado un enlace que aparece al final de esta pagina y que muchas otras paginas o blogs también tienen.
¿Para que sirve? Sirve para que cuando un usuario se desplaza hasta el final de una pagina y estos en lugar de ir hacia arriba de la forma común, ahora solo tienen que hacer clic en Ir Hacia Arriba y la pagina automáticamente se desplaza hacia arriba; esto es algo muy útil, y aun mas si tenemos una Pagina Web o Blog que tienen mucho contenido o son muy extensos; para lograr esto es necesario utilizar JavaScript, lo podemos hacer de dos formas, una es con un enlace, y la otra es con una imagen como botón.
Para crear un enlace o un botón que nos regrese a la parte de arriba de la pagina.
Editamos la plantilla de nuestro Theme desde el mismo panel de WordPress, y seleccionamos el archivo header.php o el que corresponda a la Cabecera de nuestro Theme, luego después de la etiqueta :
<head>
Colocamos el siguiente código (JavaScript) :
<script type="text/javascript">
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 25);
}
</script>
Después de agregar el código anterior, guardamos los cambios realizados, y es hora de crear el enlace; para crear un enlace que nos dirija hacia arriba, lo tendriamos que crear con el siguiente formato:
<a onclick="backToTop(); return false" href="javascript:;">Ir Hacia Arriba</a>
y para utilizar una imagen en lugar de solo un enlace tendríamos que utilizar este otro formato :
<a onclick="backToTop(); return false" href="javascript:;"><img alt="texto alternativo" src="http://www.mipagina.com/imagen.png" /></a>
El enlace o imagen puede colocarse en cualquier lugar de la pagina, pero se recomienda colocarlo lo mas abajo posible para aprovechar correctamente este método.
Nota: El código de los enlaces se puede modificar a nuestras necesidades, solo que tenemos que respetar los elementos :
onclick="backToTop(); return false" href="javascript:;"
a excepción del código JavaScript que insertamos en el Header de nuestra Plantilla, ya que este si es modificado podría provocar que no funcione correctamente.
Articulos Relacionados:
- Ir Hacia Arriba en WordPress con HTML
Anteriormente les explicaba como desde un enlace, desplazarnos hacia arriba... - Subir juegos Flash a WordPress
Podemos utilizar WordPress para subir juegos on-line (también llamados juegos...
eva
