Rolagem de página animado com JQuery
Posted by alex | Posted in .NET, Geral, HTML, JSP, JavaScript, POO | Posted on 11-11-2009-05-2008
0
E aí galera blz!
Sou o Alexander, mais conhecido Alex. Trabalho na Agence como webdesigner e faço freelancers através de minha empresa Lexadesign.
Neste meu primeiro post no blog dos Relaxos vou mostrar como fazer rolagem de página animada utilizando jQuery:
Começando com o HTML, montamos uma estrutura contendo título, links e imagem. A rolagem animada entre estes itens será feita por Jquery.
Criamos uma DIV #container para alinhar o conteúdo ao centro, em seguida as DIVs #um, #dois, #tres e #quatro. Cada um contendo H1, lista com links e uma imagem.
HTML:
<div id="container"> <div id="um"> <h1>Conteudo 01</h1> <ul> <li><a href="#dois">ir para conteúdo 02</a></li> <li><a href="#tres">ir para conteúdo 03</a></li> <li><a href="#quatro">ir para conteúdo 04</a></li> </ul> <img src="moto-mv-agusta-f4-senna-c8726.jpg" alt="" /> </div> <div id="dois"> <h1>Conteudo 02</h1> <ul> <li><a href="#tres">ir para conteúdo 03</a></li> <li><a href="#quatro">ir para conteúdo 04</a></li> <li><a href="#um">ir para conteúdo 01</a></li> </ul> <img src="9673moto.jpg" alt="" /> </div> <div id="tres"> <h1>Conteudo 03</h1> <ul> <li><a href="#quatro">ir para conteúdo 04</a></li> <li><a href="#um">ir para conteúdo 01</a></li> <li><a href="#dois">ir para conteúdo 02</a></li> </ul> <img src="11209moto2.jpg" alt="" /> </div> <div id="quatro"> <h1>Conteudo 04</h1> <ul> <li><a href="#um">ir para conteúdo 01</a></li> <li><a href="#dois">ir para conteúdo 02</a></li> <li><a href="#tres">ir para conteúdo 03</a></li> </ul> <img src="4268moto1-1.jpg" alt="" /> </div> </div>
CSS:
html, body { margin:0; font:12px Arial, Helvetica, sans-serif; } #container { width:95%; margin:0 auto; } h1 { display:block; width:60%; position:relative; float:left; } #um, #dois, #tres, #quatro{ padding:10px; width:95%; text-align:center; } ul { width:40%; margin:0; padding:20px 0 10px; position:relative; list-style:none; float:left; } ul li { position:relative; float:left; } ul li a { display:block; padding:4px 8px; color:#063; text-decoration:none; }
Temos a estrutura básica com todos os links apontados para os seus devidos lugares. Porém ao clicar a página é deslocada de forma brusca e nada atrativa.
Eis o momento em que damos vida a nossa página adicionando a biblioteca JQuery disponível no site http://jquery.com/
$(function(){ //Rolagem de página //Definindo a ação - No caso indico que ao clicar em qualquer <strong>tag A</strong> desencadeia a seguinte ação $("a").click(function(){ //animar, a partir do html/body, a rolagem $('html,body').animate({scrollTop: //até a posição obtida pela altura do <strong>elemento alvo</strong> a ser especificado $("elemento alvo").offset().top} //velocidade da animação em milisegundos , 500); //atribui para este caso, que retornasse na como <strong>elemento alvo</strong> o <strong>href</strong> do objeto clicado $(this).attr("href") A função completa ficou assim: $(function(){ //Rolagem de página $("a").click(function(){ $('html,body').animate({scrollTop: $($(this).attr("href")).offset().top}, 500); }) }) }) })
