Skip to content

Instantly share code, notes, and snippets.

@luisrenemas

luisrenemas/index.html

Created September 23, 2018 22:11
Show Gist options
  • Save luisrenemas/f843307bcc82482e4cc7f060b0bc378c to your computer and use it in GitHub Desktop.
Save luisrenemas/f843307bcc82482e4cc7f060b0bc378c to your computer and use it in GitHub Desktop.
Download ZIP
Demo de uso de Smooth Scroll
Raw
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Botón subir (top)</title>
<!--Librería css de Font Awesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Tus demas hojas de estilos css -->
<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;
}
/*evento hover*/
.boton-subir:hover{
box-shadow: 0px 2px 10px 0px rgba(255, 255, 255, 0.75);
}
/*estilos para el tag i*/
.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>
</head>
<body>
<!--Instala el plugin Emmet-->
(p>lorem50)*10 <!--Presiona la tecla Tab para generar contenido de prueba-->
<p id="parrafo" style="background: tomato;">Lorem ipsum dolor sit amet.</p>
(p>lorem50)*10 <!--Presiona la tecla Tab para generar contenido de prueba-->
<!-- código HTMl botón subir (top)-->
<a data-scroll href="#parrafo" id="js_up" class="boton-subir">
<!-- 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>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script>
$(window).scroll(function(){
var windowHeight = $(window).scrollTop();
var parrafo = $("#parrafo").offset().top + 1;
if(windowHeight >= parrafo ){
$("#js_up").slideDown(300);
}else{ // si no
$("#js_up").slideUp(300);
}
});
var scroll = new SmoothScroll('a[href*="#"]');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment