Estou com o seguinte problema, criei um botão de volta ao topo, posicionei ele no canto inferior direito e dei um position:fixed
nele. Estou fazendo uso da biblioteca jQuery. O problema ocorria quando a barra de rolagem chegava ao final, o botão acabava se escondendo por baixo do rodapé. A solução foi diminuir o tamanho do footer
na distância que eu tinha posicionado o botão do topo da página. Gostaria que quando ele chegasse ao final, ele ficasse sobrepondo o footer
.
Alguém fortalece ai rapazes!
<!-- código CSS que se aplica ao botão -->
.btn-up {
width: 80px;
height: 50px;
position: fixed;
top: 480px;
margin-left: 1260px;
font-family: tahoma, arial;
font-size: 1.5em;
text-height: 50px;
color: #FFF;
background-color: #666;
border: 2px solid #333;
border-radius: 5px;
box-shadow: 2px 2px 15px #000;
}
.btn-up:hover {
background-color: #DC143C;
box-shadow: 2px 2px 15px #F00;
}
<!-- HTML -->
<button class="btn-up">Subir</button>
<!-- script -->
<script>
var subir = $(".btn-up");
$(window).scroll(function() {
var minhaposicao = $(this).scrollTop();
if(minhaposicao >= 1080) {
subir.fadeIn();
}else {
subir.fadeOut();
}
})
subir.on("click", function() {
$("html, body").animate({scrollTop: 0}, 500);
})
</script>