Neste post vou mostrar como fazer Botão voltar ao Topo (Animated Scroll to Top), este é um artigo do site Web Designer Wall, no qual o original está em inglês. O tutorial é bem explicativo e fácil de implementar. Se quiserem ler o artigo na íntegra é só entra no link em Referências. Segue abaixo o texto traduzido. Bom trabalho 🙂

“Devido a uma série de pedidos, estou escrevendo um tutorial detalhes sobre como criar um pergaminho animado para o início como visto em Web Designer parede. É muito simples de fazer com jQuery (apenas algumas linhas de código). Ele verifica se a posição de rolagem máxima é superior a determinado valor, em seguida, desaparecer no botão de rolagem para cima. Após o link é clicado, ele rola a página até o topo. Veja a demo para vê-lo em ação.

DEMOScroll to Top

DOWNLOADDemo Zip

Design & CSS
Declare o elment # back-top com a posição: fixado de modo que permanece fixo na página. A tag span é opcional. Eu adicionei a tag span para exibir o gráfico seta. Eu também adicionei transição: 1s (1s = 1 segundo) para criar o efeito de desvanecimento no mouse over.

Dê uma olhada nesta demonstração demo (note: the jQuery part is not implemented yet).

back to top image



#back-top {

	position: fixed;

	bottom: 30px;

	margin-left: -150px;

}

#back-top a {

	width: 108px;

	display: block;

	text-align: center;

	font: 11px/100% Arial, Helvetica, sans-serif;

	text-transform: uppercase;

	text-decoration: none;

	color: #bbb;

	/* transition */

	-webkit-transition: 1s;

	-moz-transition: 1s;

	transition: 1s;

}

#back-top a:hover {

	color: #000;

}

/* arrow icon (span tag) */

#back-top span {

	width: 108px;

	height: 108px;

	display: block;

	margin-bottom: 7px;

	background: #ddd url(up-arrow.png) no-repeat center center;

	/* rounded corners */

	-webkit-border-radius: 15px;

	-moz-border-radius: 15px;

	border-radius: 15px;

	/* transition */

	-webkit-transition: 1s;

	-moz-transition: 1s;

	transition: 1s;

}

#back-top a:hover span {

	background-color: #777;

}

Part jQuery (Demo)
Abaixo está o código Javascript (você pode colá-lo em qualquer lugar na página). Basicamente, ele esconde o elemento # back-top (que é a tag id=”back-top”> scrollTop) é maior 100, em seguida, desaparecer no elemento # back-top, mais fade out. O próximo conjunto de código é a função de clique. Se o link # back-top é clicado, ele irá animar o corpo scrollTop a 0.

Se você quer aprender alguma codificação jQuery básicos, leia o meu tutorial jQuery for Designers tutorial.

// <![CDATA[
javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
// ]]>//  100) {

				$('#back-top').fadeIn();

			} else {

				$('#back-top').fadeOut();

			}

		});

		// scroll body to 0px on click

		$('#back-top a').click(function () {

			$('body,html').animate({

				scrollTop: 0

			}, 800);

			return false;

		});

	});

});
// ]]>

Não Fallback Javascript
Note-se a volta ao botão de cima está ligando para ancorar # top que é o ID da tag . Tecnicamente falando, você não precisa atribuir qualquer link de âncora porque jQuery pode rolar a página para qualquer posição. No entanto, é bom para incluí-lo porque ele fornece uma alternativa se o Javascript não é suportado.”

Referências:

Facebook Comments
Tutorial Botão voltar ao Topo (Animated Scroll to Top)
Tagged on:

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

X

Pin It on Pinterest

X