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.

3 comentarios:

  1. Genial el truco, si funciona y todo, pero lo malo es que se desliza hacia arriba muy lentamente xD, haha.

    Saludos y gracias por compartir.

    PD: se puede acelerar el deslizamiento del truco?.

    ResponderEliminar
  2. Si se puede
    modificadonde dice: t = setTimeout('top()', 10);

    menos de 10 va mas rapido.

    ResponderEliminar
  3. @ Vku:

    Haha gracias por responderme, si es verdad lo que me dices, a menos de 10 es más rápido el deslizamiento, pero yo lo quiero más rápido aún xd.

    Disculpa la molestia amigo.

    Saludos ;)

    ResponderEliminar

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.

Nota: solo los miembros de este blog pueden publicar comentarios.