Flecha para volver arriba con efecto deslizante



En esta entrada colocaremos una flecha que nos permita volver al inicio o la parte superior del blog.


Obtendremos el mismo resultado que al realizar el truco "flecha para volver arriba" pero esta vez, con un efecto deslizante, prácticamente igual pero sin necesidad de alojar scripts externos en la plantilla, con lo que obtendremos una instalación simple.

Puedes comprobar el resultado pulsando la flecha en la esquina inferior izquierda de cualquier entrada o en el footer (parte inferior del sitio)de este blog.
Ir a Edición de HTML:

Diseño► Edición de HTML ►Presionar Ctrl + F y Buscar lo siguiente:►
Busca la etiqueta </head> y arriba de esta inserta el siguiente script:

<!-- Volver arriba deslizante -->
<script language='javascript' type='text/javascript'>
var bl_subirdesliz;
function bl_clicsubir() {
if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0) {
window.scrollBy(0, -40);
bl_subirdesliz = setTimeout(&#39;bl_clicsubir()&#39;, 8);
}
else clearTimeout(t);
}
</script>
<!-- Fin volver arriba deslizante -->

Ahora, justo encima de la etiqueta </body> inserta este código:


<a href='#' onclick='bl_clicsubir();return false' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='ir arriba'><img src='URL la imagen'/></a>



Obteniendo la flecha en la esquina inferior derecha. Para cambiar su posición:


  • Flecha en la esquina superior derecha:


Cambia el atributo bottom por top.


  • Flecha en la esquina inferior izquierda:


Cambia el atributo right por left.


  • Flecha en la esquina superior izquierda:


Cambia el atributo right por left así como bottom por top.


Puedes sustituir la imagen por cualquier otra, reemplazando la la línea en color gris con la URL de tu icono.

Si en lugar de una imagen prefieres mostrar una palabra borra dicha línea gris y escribe el texto.

La flecha al final de tus entradas


Para mostrar la flecha en el pie de tus post, introduciremos el código antes de una de:


<p class='post-footer-line post-footer-line-2'/>

Sino la encuentras busca

<div class='post-footer-line post-footer-line-2'>


Antepone esta otra línea...


<a href='#' onclick='bl_clicsubir();return false' style='float: left' title='ir arriba'><img src='URL de la imagen'/></a>

Dale a Vista previa y guarda la plantilla.

El icono se encontrara ubicado a la izquierda del pie del post. Para alinearlo a la derecha, cambia left por right.




Para las imagenes ver en esta página.


position: fixed

Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posición final será siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecerá en la misma posición.



Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top