Mover para o topo ou para o fundo

Por vezes ao ler um blog temos a necessidade de voltar ao inicio e para isso vimos-nos obrigados a usar o "skroll" do rato ou a barra de rolamento do navegador e pensamos que se houvesse algo que nos pudesse fazer isso apenas com um clique, seria bom!
Isso é possível e fácil!
Hoje vou explicar como incluir essa função num blog através duma imagem que irá servir de link para isso.

Para isso é necessário entrar no código fonte do vosso blog e procurar a tag </body>.
Imediatamente antes basta incluir o seguinte:

<div style='float:right;'><a href='#outer-wrapper'><img src='ENDEREÇO DA IMAGEM' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Topo da página'/></a></div>

Este código irá fazer com que apareça uma imagem no canto inferior, direito no ecrã que ao ser clicado, nos vai levar para o topo da página.

Para o inverso, ou seja, irmos para o fundo da página basta fazermos umas pequenas alterações no código anterior.
Onde podemos ver #outer-wrapper, vamos ter que substituir por #footer-wrapper e onde podemos ver style='display:scroll;position:fixed;bottom:5px;right:5px; vamos trocar a palavra bottom por top ficando desta forma:

<div style='float:right;'><a href='#footer-wrapper'><img src='ENDEREÇO DA IMAGEM' style='display:scroll;position:fixed;top:5px;right:5px;' title='Fundo da página'/></a></div>

A primeira alteração irá definir que é para o rodapé da página que pretendemos ir e a segunda irá definir que a imagem irá ficar localizada no topo da página.

NOTA: se pretenderem que a imagem fique localizada à esquerda do corpo do blog basta que substituam o right por left à frente de float:

Ler mais...

Fechar...