Como impedir que um clique em um link '#' salte para o topo da página?

Atualmente, estou usando <a>tags com jQuery para iniciar coisas como eventos de clique etc.

Exemplo é <a href="#" class="someclass">Text</a>

Mas eu odeio como o '#' faz a página pular para o topo da página. O que posso fazer em vez disso?

No jQuery, quando você lida com o evento click, return false para impedir que o link responda da maneira usualimpeça a ação padrão, que é visitar o hrefatributo, (pelo comentário de PoweRoy e pela resposta de Erik ):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Portanto, isso é antigo, mas ... caso alguém encontre isso em uma pesquisa.

Basta usar em "#/"vez de "#"e a página não irá pular.

você pode até escrever assim:

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

Não tenho a certeza que é uma maneira melhor, mas é uma maneira :)

Solução 1: (simples)

<a href="#!" class="someclass">Text</a>

Solução 2: (necessário javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

Solução 3: (necessário jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

Você pode usar event.preventDefault()para evitar isso. Leia mais aqui: http://api.jquery.com/event.preventDefault/ .

Basta usar em <input type="button" />vez de <a>e usar CSS para estilizá-lo para parecer um link, se desejar.

Os botões são criados especificamente para clicar e não precisam de nenhum atributo href.

A melhor maneira é usar a ação onload para criar o botão e anexá-lo onde for necessário via javascript; portanto, com o javascript desativado, eles não serão exibidos e não confundirão o usuário.

Quando você usa, href="#"você obtém vários links diferentes apontando para o mesmo local, o que não funcionará quando o agente não suportar JavaScript.

Se você deseja usar uma âncora, pode usar http://api.jquery.com/event.preventDefault/ como as outras respostas sugeridas.

Você também pode usar qualquer outro elemento como uma extensão e anexar o evento click a ele.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

Você pode usar #0como href, já que 0não é permitido como um ID, a página não irá pular.

<a href="#0" class="someclass">Text</a>

$('a[href="#"]').click(function(e) {e.preventDefault(); });

Apenas use

<a href="javascript:;" class="someclass">Text</a>

JQUERY

$('.someclass').click(function(e) { alert("action here"); }

Se o elemento não tiver um valor href significativo, ele não será realmente um link. Por que não usar outro elemento?

Conforme sugerido por Neothor, uma extensão é tão apropriada e, se modelada corretamente, será visivelmente óbvia como um item que pode ser clicado. Você pode até anexar um evento flutuante, para que o elemento 'acenda' à medida que o mouse do usuário se move sobre ele.

No entanto, tendo dito isso, convém repensar o design do seu site para que ele funcione sem javascript, mas seja aprimorado pelo javascript quando estiver disponível.

Os links com href = "#" quase sempre devem ser substituídos por um elemento de botão:

<button class="someclass">Text</button>

O uso de links com href = "#" também é uma preocupação de acessibilidade, pois esses links estarão visíveis para os leitores de tela, que lerão "Link - Texto", mas se o usuário clicar, ele não irá a lugar algum.

Você pode passar uma tag de âncora sem uma propriedade href e usar o jQuery para executar a ação necessária:

<a class="foo">bar</a>

Eu tenho usado:

<a href="javascript://nop/" class="someClass">Text</a>

O #/truque funciona, mas adiciona um evento histórico ao navegador. Portanto, clicar para trás não funciona como o usuário deseja / espera.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); é o caminho que segui, pois funciona para conteúdo já existente e quaisquer elementos adicionados ao DOM após o carregamento.

Especificamente, eu precisava fazer isso em um menu suspenso de inicialização dentro de um .btn-group(Referência) , então fiz:

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

Dessa forma, foi direcionado e não afetou mais nada na página.

Eu sempre usei:

<a href="#?">Some text</a>

ao tentar impedir o salto da página. Não tenho certeza se é o melhor, mas parece que está funcionando bem há anos.

Existem quatro maneiras semelhantes de impedir que a página salte para o topo sem nenhum JavaScript:

Opção 1:

<a href="#0">Link</a>

Opção 2:

<a href="#!">Link</a>

Opção 3:

<a href="#/">Link</a>

Opção 4 ( não recomendado ):

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

Mas é melhor usar event.preventDefault()se você estiver entregando o evento click no jQuery.

Você também pode retornar false após processar seu jquery.

Por exemplo.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Eu uso algo como isto:

<a href="#null" class="someclass">Text</a>

Para impedir que a página salte, você deve ligar e.stopPropagation();após ligar e.preventDefault();:

stopPropagationimpede que o evento suba na árvore DOM. Mais informações aqui: https://api.jquery.com/event.stoppropagation/

Se você deseja migrar para uma seção âncora na mesma página sem aumentar a página, use:

Basta usar "# /" em vez de "#", por exemplo

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

Adicionar algo depois #define o foco da página no elemento com esse ID. A solução mais simples é usar #/mesmo se você estiver usando o jQuery. No entanto, se você estiver lidando com o evento no jQuery, esse event.preventDefault()é o caminho a percorrer.

O <a href="#!">Link</a>e <a href="#/">Link</a>não funciona se for necessário clicar na mesma entrada mais de uma vez. Leva apenas um clique de evento para cada uma em várias entradas.

ainda o melhor caminho a seguir é com <a href="#">Link</a>

então,

event.preventDefault();