Como criar um botão para ir para o topo

• Tweet
• Sharebar

• Tweet

Alguns sites e blogs possuem um botão que permite ir rapidamente para o topo de uma página ou do uma secção de conteúdo.
O tutorial de hoje é aplicável a qualquer site ou blog pois é puro html e css.

Este botão funciona com ancoras em html. Para criar uma ancora costumo utilizar a tag referente aos links embora possa ser utilizado um div.

O processo é simples, basta adicionar a ancora e colocar um link onde se pretende que o botão funcione.

Em termos práticos primeiro crias a âncora:

<a name="topo"></a>

De seguida crias o link que irá chamar a âncora:

<a href="#topo"></a>

É relativamente simples como podes ver. Se queres que o botão siga a página conforme o utilizador vai fazendo scroll apenas tens de aplicar alguns estilos css.
Neste caso vou colocar o botão no canto inferior direito com alguma margem dos cantos da página usando CSS:

.botao-top {
margin:10px;
position:fixed;
right:0;
bottom:0;
}

Basta aplicar a classe css botao-top ao elemento do botão et voilá, o botão fica no canto inferior direito e irá acompanhar a página conforme o utilizador for fazendo scroll.

Clica aqui para voltar ao inicio deste artigo