Botón para ir arriba en una web con jQuery

Siempre es interesante tener un botón para volver a la parte superior de nuestra página web, que aparezca en el momento que nosotros decidamos, depediendo de la posición del scroll en nuestra página web

La parte de HTML

Necesitamos un enlace con apariencia de boton, en este ejemplo lo creo con un icono de Font Awesome

<div id="stop" class="boton-subir">
    <a href="#top"><i class="fas fa-arrow-up"></i></a>
</div>

En el href pongo el id del bloque en el que quiero situar cuando pulsen el enlace (botón). Si lo dejamos vacío también vale, la página se refrescará y se situará en la parte superior.

 

La parte de CSS

Aquí no hay mayor misterio que situarlo con position:fixed y dejarlo oculto por defecto con display:none

.boton-subir {
  position: fixed;
  right: 5%;
  bottom: 10px;
  background-color: #17181C;
  padding: 20px;
  display: none;
  opacity: 0.7
}

.boton-subir a {
  font-size: 24px;
  color: #fff;
}

 

 

La parte de jQuery

$(window).scroll(function() {

 var position =$(this).scrollTop();

 // Si el usuario baja el scroll muestro el div qeu contiene el enlace botón
 if (position > 300) {
    $(".boton-subir").fadeIn('slow');
  } else {
  $(".boton-subir").fadeOut('slow');
 }
});

No se os olvide descargar o añadir la librería de jQuery mediante CDN, como os muestro a continuación

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

 
 
 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *