Animated Scroll em JavaScript
Por: Henrique C. Pereira
Publicado em Saturday 25 November 2006 às 14:53Categoria: HTML/CSS/JScript
Semanas atrás eu achei um artigo interessante no Branding Spanking News chamado Animated anchor links with unobstrusive javascript que cria um feito de “scrolling animado” nas âncoras. O JavaScript é sim não obstrusiuvo mas eu não achei elegante a chamada de função no body do HTML da página de exemplo do post do autor do script. Por isso eu alterei o arquivo original e coloquei essa chamada dentro do próprio JavaScript e se quiser utilizar minha versão alterada (a mesma que eu uso aqui no site) sinta-se à vontade. Se preferir utilize a versão original do autor. Só peço o favor de copiar o script para seu próprio servidor ok?
Eu implementei ele aqui no Revolução Etc na forma de um botão “ir para o topo” no canto direito inferior do site. Várias pessoas já me escreveram dizendo que os artigos são grandes demais e que tinham muita rolagem, agora você tem a oportunidade de voltar ao topo do site rapidinho apenas clicando neste botão e se divertir enquanto vê a página sendo escrolada sozinha até o topo. Eu criei uma página de exemplo com o script e a implementação dele isolada para facilitar sua vida na hora de implementar. Basta linká-lo com a tag script que automaticamente o scroling de suas âncoras passaram a ser “animadinhas”.
Âncoras de modo geral ajudam e muito a navegação e a citação de determinados trechos em documentos muito longos como por exemplo este artigo que eu escrevi. Em alguns contextos eu me sinto feliz quando encontro algo do tipo “ir para o topo” onde está a navegação do documento e/ou navegação do próprio site. Contextos com muita rolagem agradecem um recurso como este. Neste exemplo que eu implementei aqui, mesmo que o usuário não tenha JavaScript habilitado, ele funcionará como uma âncora comum. Vale lembrar que a forma com que eu implementei aqui, não funciona no Internet Explorer 6. Não pelo JavaScript mas pelo CSS utilizado.
Para posicionar o botão fixo no canto esquerdo para todos os browsers (nem para o Internet Explorer 6) eu utilizei a seguinte regra de CSS:
.top a {
width:41px;
height:41px;
display:block;
overflow:hidden;
font-size:1px;
text-indent:-200px;
background:url("http://www.revolucao.etc.br/imagens/topo.gif") no-repeat;
}
No IE6 não vai funcionar, mas não me preocupei com isso aqui no meu site. Mas o JavaScript funciona sim no Internet Explorer 6, bem como nos outros browsers perfeitamente. Enjoy!
Comentários dos leitores
Este artigo possui 28 comentários
eu particularmente não muita utilidade. mas nessas horas, não devemos pensar na gente e sim nos usuários.
Realmente não tem muita utilidade, mas que o efeito deixa a coisa bem mais "biitinha" deixa sim.
Dá pra se divertir vendo a página rolar sozinho, se você não tiver mais nada pra fazer, né! =P
Té! =)
Muito interessante esse efeito. Legal mesmo!
Agora em relação a esse botão na direita do site, que volta para o topo da página, eu não vejo muita utilidade nele, sei lá… Não acho que aja necessidade de colocar, é só apertar a tecla ‘HOME’ no teclado que vai pro topo dá página em um piscar de olhos, mas também tem aquele lado do usuário não ter que tirar a mão do mouse, ou ter que levar o dedinho da outra mão! =P
Para quem tem o scroll no mouse, esse botão é bastante inútil. Mas estamos no Brasil e é comum o povo não ter um mouse sofisticado. Acho a idéia válida.
muito legal este script, na http://script.aculo.us/ tem como fazer esse efeito tb.
por sinal, a scriptaculous tem efeitos sensacionais :)
eu estou fazendo uns estudos usando ela combinada com http://bennolan.com/behaviour/ e to fazendo coisas bem interessantes sem uma linha de javascritp inline
Não é algo só legalzinho. Sob o ponto de vista da usabilidade, esse comportamento nas âncoras favorece a navegação, principalmente para usuários normais, sobretudo em interfaces com conteúdo extenso.
Valeu pela dica!
Sexta feira estava eu atrás desse script que nem louco e não consegui encontrar de jeito nenhum ! E agora abro meus Feeds e vejo esse post ! Perfeito ! Bem na hora certa ! Abraços !
O css que mostrou no corpo do post, ele sozinho não deixa o botão no canto direito!? deixa?
Sem querer ser chato, vc não confundiu direita com esquerda tb não?
É dúvida minha msm!
O efeito é bacana e é útil pelo fato do usuário não se perder dentro da própria página com os textos linkados aparecendo de forma rápida na sua frente quando clica em um link de ancora mas perde o sentido se não tiver uma forma de usuários de IE não poderem visualizar…
Cool…
Eu deixaria a movimentação mais veloz (pq demora muito a chegar no topo) e colocaria no botão um png transparente (em 800×600 o botao vira um quadrado).
O efeito é interessante para outros casos.
Muito legal! ótimo para textos longos e fácil de implementar, vamos usar nos nossos sites.
Thanks
O efeito é bacana, mas acho que é uma demora desnecessária esperar rolar toda a página para chegar no topo.
Um simples toque no "Home" do teclado é suficinte.
Mas é bacana conhecer o efeito e quem sabe ele pode ser útil em algum momento.
Excelente dica, valeu!
essa é uma boa para implementar naqueles sites horizontais (como o da InterCon 2006). Fica um pouco mais "chique" haha.
também achei meio estranho chamar a função no body, mas ainda bem que alguém corrigiu a tempo.
[]'s
Bruno, também tenho usado bastante o Behaviour e ele, combinado ou não a outros frameworks ou bibliotecas, tem tido excelentes resultados.
Sobre o topo, achei o efeito bacana, mesmo que não vá usar.
Pingback: Animated Scroll em JavaScript « [REF]
Gostei bem legal esse efeito. Já vi em alguns sites "horizontais", onde o menu era fixo embaixo e o conteúdo deslizava suavemente.
[]s
Eu acho que quanto mais experiências pudermos proporcionar aos usuário melhor.
Gostei do post eu sempre estou criando uns JsFx em casa quando sobra tempo para causar um certo impacto no usuário.
Bacana sim, mas ainda prefiro ancora é mais rápido.
Abraços…
[...]7. Scroll animado em javascript[...]Imperdíveis, não deixem de ler.[...]
para esse efeito e show como no meu site la os textos sao grandes ,muito util
Legal este código. Assim que puder irei colocar em meu site.
Obrigado
Olá, Parabéns pelo script, mas eu precisaria deste scritp na vertical será que teria como alterar para mim e enviar-me por e-mail, Valeu!
Muito útil vou testar.
Legal, mas só funciona em conteúdos que tem barra de rolagem lateral. Eu queria utilizar ele em um site que não tem barra de rolagem e não funfo.
Olá companheiro, achei muito interessante o artigo.
Sou iniciante, portanto não estranhe a pergunta, mas e seu eu quiser fazer um scroll lateral? Digamos que o site seja completamente horizontal, há como fazer esse scroll lateralmente?
Grato
Pingback: Screencaster » jQuery Smooth Scroll permite que você faça scrolls animados
"Você fez uma busca no http://www.google.com.br por javascript mouse scroll"
Se fui eu que fiz a busca, obviamente eu já sei que a fiz e sei qual o(os) termo(s) que eu pesquisei e não tem porque vocês me digam o que eu pesquisei.
Sinto como se vocês estivessem me tratando como um idiota retardado.