Animated Scroll em JavaScript
Por: Saturday 25 November 2006 às 14:25
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!
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!
Tags: CSS JavaScript Usabilidade scroll
# 1° Thalis Valle Saturday 25 November 2006 às 03:25 PM GMT
eu particularmente não muita utilidade. mas nessas horas, não devemos pensar na gente e sim nos usuários.