Artigos & Ideias

Botão Topo Com MooTools

Escrito por:

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.

botao demonstracao   Botão Topo Com MooTools

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.

botao demonstracao   Botão Topo Com MooTools

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')
});
1


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

Comentários

Comentar

Nota: A moderação de comentários está activada e pode atrasar o teu comentário. Não há necessidade de reenviares o teu comentário.

  1. Carlos Gonçalves  Outubro 3, 2009
More in JavaScript, MooTools (15 of 20 articles)

# #