8

A ideia é iniciar uma animação quando determinada hash é encontrada no URL.

Exemplo

Pegando no exemplo de uma página cuja navegação funciona por hash:

<nav>
  <ul>
    <li><a href="#john">John</a></li>
    <li><a href="#doe">Doe</a></li>
    <li><a href="#Jane">Jane</a></li>
  </ul>
</nav>

<section id="john">Super BuBu</section>
<section id="doe">Super Saiyan</section>
<section id="jane">Jane Porter</section>

O utilizador clica no menu e a página faz a rolagem para o id em questão.
A ideia é despoletar uma ação quando por exemplo se acesso ao #doe que poderia ser realizado através do evento de clique no link com o href igual a #doe.

Problema

Se o utilizador aceder diretamente à página através de um URL que já contém a hash para o direcionar para a secção correta, a ação previamente associada ao clique no elemento referido não é despoletada.

http://www.meusite.com/bananas.php#doe

Pergunta

Como despoletar uma ação quando no URL do navegador é encontrada determinada hash?

7
  • 3
    Despoletar = disparar (acho) :)
    – Maniero
    Commented 15/01/2014 às 1:51
  • @bigown Pois, não sei ;) Mas "disparar" ou "desencadear" também ficam bem! Apesar de correcto, pode-se alterar para fazer mais sentido às massas!
    – Zuul
    Commented 15/01/2014 às 1:56
  • 1
    Hahaha, desculpe, mas "despoletar" soa MUITO engraçado no Brasil! Ah, e engraçado no Brasil quer dizer "divertido".
    – bfavaretto
    Commented 15/01/2014 às 1:59
  • 2
    Acho que "disparar", como sugeriu o bigown. E fico feliz de aprender essa nova palavra "despoletar", passarei a usá-la! Veremos se alguém irá me entender :)
    – bfavaretto
    Commented 15/01/2014 às 2:03
  • 4
    Pensando em espoleta, faz todo o sentido.
    – Largato
    Commented 15/01/2014 às 2:06

2 Respostas 2

4

Se o problema é "o que fazer quando a página já abre com a hash presente", sugiro tornar mais genérico o método que trataria do clique, e invocá-lo logo após a página ser carregada:

$(function() {

    var acoes = {
        "#hash1": function() { ... },
        "#hash2": function() { ... },
        ...
    };

    function executarAcao() {
        if ( window.location.hash && acoes[window.location.hash] )
            acoes[window.location.hash]();
    }

    $("a").filter(function() {
        return ($(this).attr("href") || "").indexOf("#") == 0;
    }).click(function(e) {
        e.preventDefault();
        window.location.hash = $(this).attr("href");
        executarAcao();
    });

    ...

    // No final do seu script
    executarAcao();
});
0
3

Você pode monitorar o evento hashchange:

window.onhashchange = function() {
    alert(window.location.hash);
};

Exemplo no JSFiddle

Dentro da função você pode verificar o hash e atuar de acordo.

Detalhes:
Se não me engano, entre Firefox e Chrome, um dos dois despoleta (hehe) o evento hashchange automaticamente quando a página carrega, e no outro o evento precisa ser disparado manualmente. E o IE só suporta esse evento a partir da versão 8, e também não dispara o evento quando a página carrega.

Então é recomendável chamar window.onhashchange() assim que o DOM carregar, para obter o efeito que você deseja.

3
  • 1
    O onhashchange ocorre antes ou depois da "ação padrão" do clique? (i.e. quando esse método for executado, a tela já terá rolado?) Quando o OP diz "animação", a primeira coisa que me vem à cabeça é uma animação de scroll - o que exigiria que o evt.preventDefault() fosse chamado no handler do clique. E isso poderia impedir a hash de mudar, não?
    – mgibsonbr
    Commented 15/01/2014 às 2:44
  • Tem razão, se a idéia é previnir o rolamento automático é preciso usar o evento click como na sua solução, o hashchange não serve (ele ocorre depois do clique).
    – bfavaretto
    Commented 15/01/2014 às 2:56
  • Fica o +1 pela resolução do problema, mas a resposta do @mgibsonbr vale pela solução global e integrada!
    – Zuul
    Commented 15/01/2014 às 4:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .