/ JavaScript

Botón subir (top) - para tu Website

Incorporar un botón de subir (top) ó botón ir arriba en una página que tenga contenido extenso es algo imprescindible.

En este tutorial vamos a implementar un botón ir arriba o botón subir (top) de una manera sencilla, utilizando la librería JavaScript jQuery.

Materiales

Código

Estructura HTML5 básica.

<!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 -->
</head>
<body>

  <!-- 
   código y contenido
   ...
  -->

  <!-- librerías JavaScript -->
  <!-- código JavaScript -->
</body>
</html>

HTML

<!-- código HTMl botón subir (top)-->
<a href="#" id="js_up" class="boton-subir">
  <!-- link del icono http://fontawesome.io/icon/rocket/ -->
  <i class="fa fa-rocket" aria-hidden="true"></i>
</a>

CSS

/*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);
}

JavaScript

Incluye estas librerías antes del cierre del tag body.

<!-- librerías js -->

<!-- jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Agrega este script js a tu archivo externo ó pegalo dentro de tu plantilla html.

<!-- script para que funcione al 100% el botón ir arriba -->
<script>
//invocamos al objeto (window) y a su método (scroll), solo se ejecutara si el usuario hace scroll en la página
$(window).scroll(function(){
  if($(this).scrollTop() > 300){ //condición a cumplirse cuando el usuario aya bajado 301px a más.
    $("#js_up").slideDown(300); //se muestra el botón en 300 mili segundos
  }else{ // si no
    $("#js_up").slideUp(300); //se oculta el botón en 300 mili segundos
  }
});

//creamos una función accediendo a la etiqueta i en su evento click
$("#js_up i").on('click', function (e) { 
  e.preventDefault(); //evita que se ejecute el tag ancla (<a href="#">valor</a>).
  $("body,html").animate({ // aplicamos la función animate a los tags body y html
    scrollTop: 0 //al colocar el valor 0 a scrollTop me volverá a la parte inicial de la página
  },700); //el valor 700 indica que lo ara en 700 mili segundos
  return false; //rompe el bucle
});
</script>

Recuerden amigos para que puedan ver este ejemplo funcionando al 100%, los recomiendo agregar bastante contenido en su página.

Luis Rene Mas Mas

Luis Rene Mas Mas

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más