Sempre que tens uma página com muito conteúdo, deves considerar adicionar um link para topo do site, na parte inferior da página para que o utilizador não necessite de ter esse trabalho sempre que quiser ir para o topo da página.
Agora e, se o problema for, querer ir para o topo da página em qualquer parte no meio da página? Com o MooTools, podemos criar um “top link” com uma marca d’água que acompanha os utilizadores conforme forem descendo na página.
O XHTML
<a href="#topo" id="irParaTopo" class="no-click no-print">Topo da Página</a>
Coloca isto em qualquer parte dentro da página que pretendes.
O CSS
#irParaTopo { display:none; position:fixed; right:5px; bottom:5px; }
Isto posiciona o código do elemento numa posição fixa, assim permanece sempre no mesmo lugar.
O MooTools (JavaScript)
new SmoothScroll({duration:500});
/* Ir para o topo após 300 pixels para baixo */
var irParaTopo = $('irParaTopo ');
irParaTopo .set('opacity','0').setStyle('display','block');
window.addEvent('scroll',function(e) {
irParaTopo .fade((window.getScroll().y > 300) ? 'in' : 'out')
});
O código é surpreendentemente pequeno.
Claro que usamos SmoothScroll para fazer com que a “transição” do footer para o topo seja “suave”. Podes ajustar a quantidade de pixels, como queiras.
IE Fix
/* Ir para o topo */
var irParaTopo = $('irParaTopo ');
irParaTopo .set('opacity','0').setStyle('display','block');
window.addEvent('scroll',function(e) {
if(Browser.Engine.trident4) {
irParaTopo .setStyles({
'position': 'absolute',
'bottom': window.getPosition().y + 10,
'width': 100
});
}
irParaTopo .fade((window.getScroll().y > 300) ? 'in' : 'out')
});
OUT








Sobre o Autor
Carlos Gonçalves é um Freelancer com bastante experiência em linguagens de programação e webdesign. Vocacionado para as novas tecnologias, aposta na qualidade dos serviços, atendimento rápido e sempre disponível para melhor satisfazer os seus clientes. Autor do site cgoncalves.com