Link de âncora html sem rolagem ou salto

Question

Eu tenho vários links que têm IDs exclusivos que são "pseudo-âncoras". Quero que eles afetem o valor do hash do URL e a mágica de cliques é tratada por algum código MooTools. No entanto, quando clico nos links, eles rolam para si mesmos (ou para o topo em um caso). Não quero rolar em lugar nenhum, mas também preciso do meu JavaScript para executar e ter o valor de hash na atualização do URL.

Código de amostra simulado:

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

Então, se você clique no link "Button 1", o URL poderia ser http://example.com/foo.php#button1

Alguém tem alguma idéia para isso? Simplesmente ter algum retorno de JavaScript sem rolagem, mas também mata meu JavaScript (embora eu provavelmente possa contornar isso com um OnClick), mas mais importante, impede o valor do hash no URL para mudar.

Answer 1

Provavelmente estou perdendo alguma coisa, mas por que não apenas dar a eles identificações diferentes?

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

Ou qualquer convenção que você preferir.

Answer 2

O ponto principal de um link de âncora é rolar uma página para um ponto específico. Então, se você não quer que isso aconteça, você precisa anexar um onclick manipulador e retorno falso. Mesmo apenas adicioná -lo como um atributo deve funcionar:

<a href="#button1" id="button1" onclick="return false">button 1</a>

Um lado do efeito acima é que o URL em si não muda, pois retornar o falso cancelará o evento. Então, como você deseja que o URL realmente mude, você pode definir o window.location.hash variável para o valor que você deseja (essa é a única propriedade do URL que você pode alterar sem o navegador forçar um recarregamento). Você provavelmente pode anexar um manipulador de eventos e chamar algo como window.location.hash = this.id Embora eu não tenha certeza de como Mootools lida com eventos.

(Também você precisa de todos os IDs para serem únicos)

Answer 3

Você pode usar o código abaixo para evitar rolar:

<a href="javascript:void(0);">linktxt</a>

Answer 4

Eu encontrei a solução. Aqui eu salvo um local antigo de ligar para Href e restaurá -lo depois de rolar

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

e no corpo da página

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a> 

Graças a SitePoint

Answer 5

Também, preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }

Answer 6

Uma maneira mais fácil seria provavelmente adicioná -lo como uma obtenção. Aquilo é, http://example.com/foo.php?q=#button1 ao invés de http://example.com/foo.php#button1

Isso não terá nenhum efeito sobre como a página é exibida (a menos que você queira), e a maioria dos idiomas de script já possui ferramentas para ler facilmente (e com segurança) os dados.

Answer 7

Bem, aqui estamos 7 anos depois que essa resposta foi publicada e eu encontrei uma maneira diferente de fazê-lo funcionar: basta apontar a janela.Location.Hash para uma âncora inexistente! Não funciona para <a>S, mas funciona perfeitamente em <div>s.

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

Funcionou bem no Chrome 56, Firefox 52 e Edge (ou seja?) 38. Outro bom ponto é que isso não produz nenhum erro ou aviso de console.

Espero que ajude alguém além de mim.