Skip to content

Instantly share code, notes, and snippets.

@luisrenemas

luisrenemas/boton-up.html

Last active July 16, 2016 06:15
Show Gist options
  • Save luisrenemas/bd01ffbaa8a81e59206912b11cf2db2a to your computer and use it in GitHub Desktop.
Save luisrenemas/bd01ffbaa8a81e59206912b11cf2db2a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
boton-up.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Btón subir</title>
<meta name="description" content="Este es el código para implementar un botón de subir arriba en nuestra página web" />
<style>
/*botón up*/
.boton-subir{
display: none;
background: #00974B;
border: thin solid #fff;
border-radius: 3px;
position: fixed;
right: 15px;
bottom:2px;
z-index: 999999999;
}
.boton-subir:hover{
box-shadow: 0px 2px 10px 0px rgba(255, 255, 255, 0.75);
}
.boton-subir i{
color: #fff;
font-size: 1.5em;
padding: 10px 10px 10px 7px;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
</style>
<body>
<!-- Tu código -->
<!-- codigo HTMl botón up-->
<a href="#" id="js_up" class="boton-subir">
<!-- icono generado gracias a Font Awesome http://goo.gl/pAmVuM-->
<!-- link del icono http://fontawesome.io/icon/rocket/ -->
<i class="fa fa-rocket" aria-hidden="true"></i>
</a>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--
Este script fontawesome es un link personal, solo lo uso para este ejemplo ustedes pueden generar su link fontawesome personal (fuente en forma de iconos http://goo.gl/pAmVuM)
video tutorial, como implementarlo en tu proyecto web: https://www.youtube.com/watch?v=g53yHVQGXh8
-->
<script src="https://use.fontawesome.com/a18b0c2e94.js"></script>
<!-- código JavaScript para botón up -->
<script>
$(window).scroll(function(){
// El botón se mostrara cuando el usuario aya bajado 301px a más.
if($(this).scrollTop() > 300){
$("#js_up").show(); //fadeIn
}else{
$("#js_up").fadeOut(); //fadeOut
}
});
$("#js_up i").on('click', function (e) {
e.preventDefault();
$("body,html").animate({
scrollTop: 0
},700);
return false;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment