Algunas veces andamos por algunas de esas webs “Guapetonas” de gran diseño y esteticidad y de pronto vemos uno de esos botones que indican una flecha hacia arriba, vamos y le damos clip y se corre todo suavemente.
Bueno vamos a implementar eso a nuestro sitio, primero vamos a ubicar el enlace que indica el botón, se puede ubicar donde quieran yo en lo personal lo ubicaría arriba del footer, buscamos esta línea:
<div class='post-footer'>
y justo arriba pegamos lo siguiente:
<a href="#" class="scrollup">Scroll</a>
Bueno vamos a implementar eso a nuestro sitio, primero vamos a ubicar el enlace que indica el botón, se puede ubicar donde quieran yo en lo personal lo ubicaría arriba del footer, buscamos esta línea:
<div class='post-footer'>
y justo arriba pegamos lo siguiente:
Ahora agregamos los estilos del botón:
.scrollup{
width:40px;
height:40px;
opacity:0.5;
position:fixed;
bottom:50px;
right:120px;
display:none;
text-indent:-9999px;
background: url('URL del boton') no-repeat;
}
width:40px;
height:40px;
opacity:0.5;
position:fixed;
bottom:50px;
right:120px;
display:none;
text-indent:-9999px;
background: url('URL del boton') no-repeat;
}
Con esto lo que hacemos es establecer el tamaño, la ubicación, la opacidad y lo fijamos, donde esta resaltado es la URL de imagen del botón, algunos ejemplos para utilizar.
Ahora por ultimo agregaremos el script que hará la función con el efecto, donde fadeIn y fadeOut con el evento JQuery lo que hará es hacer aparecer el botón cuando se navegue hacia abajo y al subir desaparecerá el mismo, buscamos esta linea </head> y lo pegamos justo arriba
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 700);
return false;
});
});
</script>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 700);
return false;
});
});
</script>
Guardamos los cambios y listo, el misterioso botón está en nuestro sitio.
