Curso de Design Responsivo Aula 19 Criando botão voltar ao topo

Nessa vídeo aula vamos aprender como criar um botão de voltar ao topo para permitir os visitantes subam á parte superior do site facilmente. Este botão permanece em uma posição fixa no site, logo pode ser visto a todo momento, quando rolar o scroll para baixo e descer pela página.

Código HTML desenvolvido na vídeo aula

<a href="#topo" class="scrollSuave voltarTopo" id="voltarTopo"></a>

Código CSS desenvolvido na vídeo aula

.voltarTopo {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 47px;
    height: 47px;
    background-image: url(../imagens/voltarTopo.png);
    display: none
}

Código jQuery desenvolvido na vídeo aula

$(document).scroll(function(){
        if($(this).scrollTop() > 500){
            document.getElementById("voltarTopo").style.display = "block";
        }else {
           document.getElementById("voltarTopo").style.display = "none" ;
        }
    });

 



Hospedagem Profissional de Sites