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
Tabla de contenidos
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>