viernes, 14 de mayo de 2010

Ir arriba con efecto deslizante sin ninguna librería

Lo mas fácil es utilizar <a href="#">Ir Arriba</a> pero no se deslizara suavemente.

Hay otras maneras con un muy lindo efecto con Jquerry o Prototype. (Ver entrada)

Utilizar solo Jquerry o Prototype para un solo efecto atrasaría el inicio del blog, son librerías pesadas sobre todo Jquerry.

Les voy a mostrar un código para poder tener el mismo efecto deslizante solo con javaScript.

Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios y justo arriba de </head> poner el siguiente código:
<script language='javascript' type='text/javascript'>
var t;
function top() {
if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0) {
window.scrollBy(0, -15);
t = setTimeout(&#39;top()&#39;, 10);
}
else clearTimeout(t);
}
</script>

Ahora tendremos que ver en que lugar queremos mostrar el link o imagen para que el visitante del blog pueda ir al principio del blog.

Los Ejemplos que voy a poner son con imágenes, si quieren que sea un texto sustituir <img src="URL de la Imagen"/> por el texto.

Ejemplo 1:
Si la queremos dejar fija abajo sobre la derecha.

Poner el siguiente código arriba de </body>:
<a href='#' onclick='top();return false' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Ir Arriba'><img src="URL de la Imagen"/></a>

Ejemplo 2:
Si la queremos dejar la imagen abajo de cada entrada.

Localizamos esta línea (puede cambiar según plantilla):
<div class='post-footer-line post-footer-line-1'>
Debajo de esa línea pondremos el siguiente código:
<a href='#' onclick='top();return false' title='Ir Arriba'><img align='right' src="URL de la Imagen"/></a>

En los 2 ejemplos sustituir URL de la Imagen por el link de la imagen.
Guardar plantilla.

Se pueden poner los 2 ejemplos juntos o elegir y colocar 1 de los 2.

No hay comentarios:

Publicar un comentario