Crear botón flotante para ir a la parte superior.
Con respecto a los estilos. El botón hereda los de bootstrap 5 por defecto y con el css .cmn- reescribo y personalizo la visualización final del botón.
Bootstrap 5
css
.cmn-divfloat {
position: fixed !important;
bottom: 45px;
right: 15px;
display: none;
}
.cmn-btncircle {
width: 40px !important;
height: 40px !important;
padding: 6px 0px;
border-radius: 15px;
font-size: 18px;
text-align: center;
}
html
<div id="div-totop" class="cmn-divfloat">
<a href="#span-top" class="btn btn-primary cmn-btncircle">
<i class="fa fa-arrow-up"></i>
</a>
</div>
javascript
Este código js iría al final de página
El resultado final lo puedes ver en esta página al hacer scroll hacia abajo
(function() {
//a partir de que punto del scroll vertical de la ventana mostrará el botón
const ishow = 115
const $divtop = document.getElementById("div-totop")
window.addEventListener("scroll", function() {
if(document.documentElement.scrollTop > ishow){
$divtop.style.display = "inherit"
}
else {
$divtop.style.display = "none"
}
})
})()
Autor: Eduardo A. F.
Publicado: 28-09-2020 17:38