Poner un carter o flecha para Subir arriba



<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});

jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}

.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(153, 204, 255, 0.80);
font-size: 14px;
padding: 1em;
display: none;
}

.back-to-top:hover {
background-color: rgba(153, 204, 255, 0.50);
text-decoration: none;
}
</style>

<a href="#" class="back-to-top">Subir arriba</a>

33 comentarios:

  1. Sale a la primera, muchas gracias.

    ResponderEliminar
  2. Sale a la primera, muchas gracias.

    ResponderEliminar
  3. Muchisims pero muchisimas gracias mismo eso de verdade me encanto :)

    ResponderEliminar
  4. la mia se a borrado :(

    ResponderEliminar
  5. snifff hasta ahora todos los tutos me han funcionado geniales menos este, no puedo cambiar mi puntero :(

    ResponderEliminar
    Respuestas
    1. Hola Dalila, no se que puede ser, no tiene más que lo que comento en el vídeo :(. saludos

      Eliminar
  6. Muchas gracias por todo, mi flecha ha quedado preciosa. Ahora voy a visualizar el vídeo sobre como relacionar una entrada a una de mis pestañas.

    ResponderEliminar
    Respuestas
    1. Hola. Me alegro de que te haya servido, gracias por comentar, saludos

      Eliminar
  7. Fenomenal trabajo el que hacéis. He visitado muchas páginas sobre consejos para blogs pero vuestras indicaciones son las mejores con diferencia. Saludos desde elcinedehollywood.com

    ResponderEliminar
    Respuestas
    1. Hola. Me alegro de que te haya servido, gracias por comentar y ver nuestros vídeos, saludos

      Eliminar
  8. Donde consigo es cursor que esta bien chulo

    ResponderEliminar
  9. Donde consigo es cursor que esta bien chulo

    ResponderEliminar
    Respuestas
    1. Hola. Vídeo 26: https://www.youtube.com/playlist?list=PLxrlSPzTYmSweRY4a2adrDLHrHX77ebTm saludos

      Eliminar
  10. ES UNA MIERDA MRK, NO LO PUEDO NI COPIAR PORQUE SALE OTRA PAGINA, Y DE PASO LA OTRA OPCION NO ME SALE. ARREGLA ESO Y EXPLICAME COMO HACERLO.

    ResponderEliminar
  11. PREGUNTA: COMO HAGO PARA RETIRAR O ESCONDER LAS OPCIONES QUE QUEDAN EN BLOGGER DESPUES DE INSERTAR LA OPCION DE SUBIR U OTRAS.. ES DECIR UNA ESPECIE DE LLAVECITAS QUE QUEDAN VISIBLES EN EL BLOG PARA DESPUES PODER SER EDITADOS?????

    ResponderEliminar
  12. PREGUNTA: COMO HAGO PARA RETIRAR O ESCONDER LAS OPCIONES QUE QUEDAN EN BLOGGER DESPUES DE INSERTAR LA OPCION DE SUBIR U OTRAS.. ES DECIR UNA ESPECIE DE LLAVECITAS QUE QUEDAN VISIBLES EN EL BLOG PARA DESPUES PODER SER EDITADOS?????

    ResponderEliminar
    Respuestas
    1. Hola Cristian, esas llaves solo las ves tu. Si sales de tu cuenta gmail y miras tu blog verás que no las tienes visibles. Simplemente blogger a los dueños de los blogs les da ese acceso directo para que editen los gadget (para los demas es invisible). saludos

      Eliminar
  13. Esta genial como pones los codigos me ayudas mucho en mi blog una duda ¿Como hago para que el boton de subir este mas abajo?

    ResponderEliminar
  14. subir para arriba? jaja, pero graciaas de verdad necesitaba el tuto

    ResponderEliminar
  15. MUY BUENO, ME RESULTO ALTIRO, INCLUSO CAMBIE VALORES DEL TAMAÑO LETRA COMO MUESTRA EN EL VIDEO Y EL RECUADRO ASUME TAMBIEN MODIFICANDOSE SOLO EL TAMAÑO, ADEMAS, CAMBIE OTRO VALOR QUE SE PUEDE ES EL MARGEN DERECHO ( SEPARACION DEL RECUADRO ) DONDE ESTA RIGHT 0PX

    ResponderEliminar
  16. Muchas gracias por hacer todo tan fácil. ¿Se podría hacer lo mismo para "ir abajo"?
    Un beso.

    ResponderEliminar
  17. esta super. si me sirvio muchisimas gracias

    ResponderEliminar
  18. Me sirvio para mi tarea, muchisimas gracias, a veces veia otros blogs de blogger que hacian eso pero no sabia como, gracias chica

    ResponderEliminar