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>

26 comentarios:

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

    ResponderEliminar
    Respuestas
    1. Me alegro de que te haya servido Juanma. saludos :D

      Eliminar
  2. 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
  3. 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
  4. 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
  5. Donde consigo es cursor que esta bien chulo

    ResponderEliminar
  6. Donde consigo es cursor que esta bien chulo

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

      Eliminar
  7. 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
  8. 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
  9. 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
  10. 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
  11. subir para arriba? jaja, pero graciaas de verdad necesitaba el tuto

    ResponderEliminar
  12. 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

Related Posts Plugin for WordPress, Blogger...