8
2009
Como criar um botão para ir para o topo
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
Leave a comment
Advertisement

An article by









Olá,
método âncora…
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…
zzz pode cre amigos rsrs