Animated Scroll em JavaScript
Por:
Saturday 25 November 2006 às 14:53Categoria: HTML / CSS / JavaScript
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!
Artigos relacionados:
- Falso hover no Internet Explorer
- Refresh de CSS para o Mozilla Firefox
- CSS Tooltip
- O Internet Explorer 7 e como manter a versão 6 instalada no Windows XP
- Estilizando abbr no Internet Explorer 6
- CRIR – Checkbox & Radio Input Replacement
- SWF Object 2
Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!
O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. 
# 1° Thalis Valle Saturday 25 November 2006 às 15:55GMT
eu particularmente não muita utilidade. mas nessas horas, não devemos pensar na gente e sim nos usuários.