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

3 Comments + Add Comment

• 
  Mestre Web 8 de Abril de 2009 às 18:35

  Olá,
  método âncora…

  Responder
• 
  Pedro 8 de Abril de 2009 às 19:00

  Boas, sabes dizer como alterar o editor de texto do WordPress (penso ser o tinymce) de modo a esconder alguns botões? Isto no WP 2.7.1 Português…

  Responder
• 
  flavio 10 de Janeiro de 2010 às 5:49

  zzz pode cre amigos rsrs

  Responder