Javascript links: problema do "onclick" e rolagem da página

Uma das formas mais tradicionais de se inserir chamadas de javascript em um site é através do evento de "onclick" dos links (tags <a>). O motivo desse pequeno tutorial sobre o assunto é mostrar como coisas tão simples podem ser feitas de várias formas, e como nem sempre pensamos em usar a melhor forma possível.

Vamos considerar a forma mais usual de links com "onclick" que vemos por aí:

<a href="#" onclick="javascript:alert('Hello world!');">Clique aqui</a>

O que é chamado no "onclick" pode ser qualquer outra função mais complexa, não é isso que estou querendo discutir aqui. O problema está no atrubuto "href" que permanece com o valor "#". Como todos sabem isso fará com que a barra de scroll do browser retorne ao topo da página, caso estejamos clicando em um link somente após descer um pouco nosso scroll.

Isso é um problema irritante para a grande maioria dos usuários. O "problema desse problema" é que ele não impede a navegação nem causa qualquer outro grande dano a funcionalidade do site, ele apenas irrita... E hoje em dia, usuários irritados vão pensar duzentas e uma vezes em retornar ao seu site.

Agora gostaria de mostrar 3 soluções para esse problema, e depois descrever os prós e os contras de cada uma delas:

Solução 1: manter-se no mesmo lugar

Com essa solução inserimos um ID (#stay) em torno do link (também poderia ser <a name="stay"></a>) e apontamos o "href" do link para ele:

<span id="stay"><a href="#stay" onclick="javascript:alert('Hello world!');">Clique aqui</a></span>

Prós
- É a solução mais simples para um único link do tipo na página.

Contras
- Precisamos criar um ID específico para cada link, pois se dois IDs iguais aparecerem na mesma página, o link irá apontar para o primeiro deles (afora isso, obviamnete seu html não irá validar). Dessa forma não é uma boa solução para quando temos diversos links com "onclick" na mesma página.

Solução 2: usar javascript:undefined no "href"

Com essa solução inserimos no "href" um comando de javascript que na verdade não causa efeito algum:

<a href="javascript:undefined;" onclick="javascript:alert('Hello world!');" onmouseover="javascript:window.status='Este link abre um javascript'; return true" onmouseout="javascript:window.status=''; return true">Clique aqui</a>

Prós
- É uma solução que resolve o problema independente do número de links com "onclick" usados na mesma página.
- Parece ser a solução mais usada na web.

Contras
- A mensagem de status do browser vai mostrar exatamente "javascript:underfined;" ao invés de uma url usual. Para sites com público leigo, isso pode assustar potencialmente, levando a crer que existe "alguma coisa estranha ali naquele link" - isto é, se é que os usuários vão se preocupar com a mensagem de status do browser.
- No exemplo temos inclusive uma tentativa de contornar o problema com mais um pouco de javascript, a questão é que a maioria dos browsers modernos vem configurado para não considerar esse tipo de script de alteração da mensagem de status, por óbvias questões de segurança. Portanto, não parece haver solução para isso.

Solução 3: inserir o "onclick" com return false

Com essa solução informamos ao browser para parar de rodar eventos do link no o "onclick", evitando que o valor do "href" nos leve a qualquer lugar:

<a href="#" onclick="javascript:alert('Hello world!'); return false">Clique aqui</a>

Prós
- É uma solução que resolve o problema independente do número de links com "onclick" usados na mesma página.
- Na minha opnião é a melhor solução.

Contras
- Apesar de simples, não podemos esquecer de utilizar o return false.

Ver exemplos

***

É isso, espero que esse pequeno tutorial tenha lhes ajudado a resolver esse problema em específico; e também a sempre considerar que as soluções usuais e mais usadas nem sempre são as melhores soluções...

Como fazer botões, passos 1 e 2

Um dos elementos mais usados no design para web são os botões. Até pouco tempo atrás botões mais elaborados eram criados diretamente pelo designer no photoshop ou programa similar, e já trazia o texto "embutido" na imagem. Algo como:

No entanto, hoje em dia já é possível criar botões com design elaborado, efeitos de rollover e bordas arredondadas apenas com CSS (e algum script para o IE, mas veremos isso em breve). Você pode achar que o botão "Join Today" (junte-se hoje) da home do Twitter.com é uma imagem - senão com texto "embutido", no mínimo com imagens de fundo com bordas arredondadas:

Mas não! Trata-se de um botão criado apenas com CSS, a única imagem existente é um PNG com alguma transparência que dá o efeito de degradê no fundo. Porém, esse tipo de formato de construção de botões permite que editemos o texto, as cores de fundo e até mesmo a curvatura das bordas facilmente - apenas editando CSS. Além disso, acaso o usuário aumente a fonte, o botão irá se ajustar automaticamente (ponto para acessibilidade).

Caso você já tenha testado a home do Twitter em vários browsers, deve ter percebido que no IE não temos bordas arredondadas pela página - incluindo o bortão de que falei... No entanto, com um pouco de JavaScript é possível deixar tudo arredendado mesmo no IE... Vamos ver como se faz.

Passo 1

Primeiro vamos definir o html de nosso botão (no caso, um exemplo comum, o botão de "Pesquisar"):

<div class="btns">
    <a href="#">Pesquisar</a>
</div>

Agora vamos definir o estilo básico inicial usando um pouco de css:

div.btns a {
 font-size:12px;
 font-family:helvetica,arial,sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 padding:5px 12px;
 color:#fff;
 background:#3792b3;
 text-decoration:none;
}
div.btns a:hover {
 background-color:#a14141;
}

Definimos a fonte e o espaçamento, assim como a cor de fundo (azul) e o efeito de rollover, que muda a cor de fundo para vermelho. Nosso botão deverá ser algo simples por agora:

Ver Passo 1

***

Passo 2

Agora vamos adicionar uma imagem de fundo ao botão, para dar um efeito interessante ao fundo. Essa imagem é um PNG simples com 50x200 pixels, onde na metade superior temos um box com fundo branco e transparência em 15%. Isso permite que o efeito seja aplicado sobre a cor de fundo já defunida no CSS - e dessa forma acaso mudemos a cor de fundo (como no rollover) o efeito irá permanecer, sem que tenhamos de criar múltiplas imagens para o mesmo botão. Veja abaixo uma imagem dessa imagem PNG sendo criada no Fireworks:

Com a imagem criada, devemos atualizar nosso CSS (repare que alinhamos ela a esquerda e ao centro vertical [0 50%], e a fizemos se repetir indefinidamente no eixo horizontal [repeat-x]):

div.btns a {
 font-size:12px;
 font-family:helvetica,arial,sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 padding:5px 12px;
 color:#fff;
 background:#3792b3 url(img/bt_bg.png) repeat-x 0 50%;
 text-decoration:none;
}

Isso nos trará um botão mais interessante:

Ver Passo 2

***

Porém, como muitos devem saber, imagens PNG com transparência não "se comportam muito bem" no IE6 e inferiores...

A seguir, no Passo 3, usaremos um pouco de JavaScript para corrigir a rebeldia de nosso querido IE6...

***

Bem vindos

Ainda me lembro a primeira vez que vi html, quando criei meu site na Geocities. Me surpreendeu que fosse relativamente simples colocar qualquer conteúdo criado por mim na web: ilustrações, tiras, quadrinhos, contos, poesias, etc. Não poderia imaginar que acabaria trabalhando com aquilo boa parte da minha vida.

Após me formar em Gravura pela UFRJ, decidi aprimorar meus conhecimentos na área de TI... Foi então que fiz a formação de Webdesign na Infnet, talvez a maior escola web do Brasil. Ao sair de lá, tinha certificados do Fireworks (programa primordial para criar layouts ou slices de imagens) e Dreamweaver (mas não dependo dele para codificar); Naquele mesmo mês, em Novembro de 2000, começei a trabalhar na Casa da Ciência da UFRJ como webmaster (quando essa posição ainda existia!).

Portanto, lá se vão quase 10 anos de trabalho com desenvolvimento web. Nesse intervalo me especializei muito mais em código, sendo muito mais um "HTMLer" - o título estranho que dão para os que trabalham com código e interface em geral - do que um designer ou programador puro. Em 2004 ingressei na Lumis, a maior empresa de CMS do país, e desde então também me tornei um especialista em montagem com o Lumis (e, consequentemente, em xsl).

Este blog visa a simples divulgação do conhecimento que adquiri nesses anos... Na medida do possível, todos os tutoriais trarão informações sobre compatibilidade com os browsers mais utilizados, exemplos e downloads externos ao blog, e uma classificação de acordo com o nível de conhecimento ideal para compreender o que está sendo exposto - inicinate, intermediário ou avançado.

Bem vindos a minha fonte!

Rafael Arrais, 07/05/2010

» Veja também meu portfolio web em http://http://www.raph.com.br/ayon/

***

Crédito da foto: ViaMoi