salto em âncora usando javascript

Eu tenho uma pergunta que será encontrada com muita frequência. O problema é que em nenhum lugar pode ser encontrada uma solução explícita.

Eu tenho dois problemas com âncoras.

O objetivo principal deve ser obter um URL limpo e agradável sem hashes enquanto estiver usando âncoras para pular em uma página.

Portanto, a estrutura das âncoras é:

<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
</ul>

<div class="wrap">
    <a name="one">text 1</a>
    <a name="two">text 2</a>
    <a name="three" class="box">text 3</a>
</div>

Ok, se você clicar em um dos links, o URL mudará automaticamente para

www.domain.com/page#1

No final, isso deve ser apenas:

www.domínio.com/página

Por enquanto, tudo bem. Agora, a segunda coisa é que, quando você pesquisar na Internet esse problema, encontrará javascriptuma solução.

Eu encontrei esta função:

function jumpto(anchor){
    window.location.href = "#"+anchor;
}

e chamando essa função com:

<a onclick="jumpto('one');">One</a>

como será o mesmo de antes. Ele adicionará o hash ao URL. Eu também adicionei

<a onclick="jumpto('one'); return false;">

sem sucesso. Então, se houver alguém que possa me dizer como resolver isso, eu realmente aprecio.

Muito obrigado.

Você pode obter a coordenada do elemento de destino e definir a posição de rolagem para ele. Mas isso é tão complicado.

Aqui está uma maneira mais preguiçosa de fazer isso:

function jump(h){
    var url = location.href;               //Save down the URL without hash.
    location.href = "#"+h;                 //Go to the target element.
    history.replaceState(null,null,url);   //Don't like hashes. Changing it back.
}

Isso usa replaceStatepara manipular o URL. Se você também deseja suporte para o IE , precisará fazê-lo da maneira mais complicada :

function jump(h){
    var top = document.getElementById(h).offsetTop; //Getting Y of target element
    window.scrollTo(0, top);                        //Go there directly or some transition
}​

Demo: http://jsfiddle.net/DerekL/rEpPA/
Outro com transição: http://jsfiddle.net/DerekL/x3edvp4t/

Você também pode usar .scrollIntoView:

document.getElementById(h).scrollIntoView();   //Even IE6 supports this

_{(Bem, eu menti. Não é nada complicado.)}

Eu acho que é uma solução muito mais simples:

window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#myAnchor"

Esse método não recarrega o site e define o foco nas âncoras necessárias para o leitor de tela.

Representante insuficiente para um comentário.

O método baseado em getElementById () na resposta selecionada não funcionará se a âncora tiver namemas nãoid definida, definida (o que não é recomendado, mas acontece na natureza).

Algo a ter em mente se você não tiver controle da marcação do documento (por exemplo, extensão da web).

O locationmétodo baseado na resposta selecionada também pode ser simplificado com location.replace:

function jump(hash) { location.replace("#" + hash) }

Porque quando você faz

window.location.href = "#"+anchor;

Você carrega uma nova página, pode fazer:

<a href="#" onclick="jumpTo('one');">One</a>
<a href="#" id="one"></a>

<script>

    function getPosition(element){
        var e = document.getElementById(element);
        var left = 0;
        var top = 0;

        do{
            left += e.offsetLeft;
            top += e.offsetTop;
        }while(e = e.offsetParent);

        return [left, top];
    }

    function jumpTo(id){    
        window.scrollTo(getPosition(id));
    }

</script>

Eu tenho um botão para avisar que, ao clicar, ele abre a caixa de diálogo de exibição e, em seguida, posso escrever o que quero pesquisar e ele vai para esse local na página. Ele usa javascript para responder ao cabeçalho.

No arquivo .html eu tenho:

<button onclick="myFunction()">Load Prompt</button>
<span id="test100"><h4>Hello</h4></span>

No arquivo .js eu tenho

function myFunction() {
    var input = prompt("list or new or quit");

    while(input !== "quit") {
        if(input ==="test100") {
            window.location.hash = 'test100';
            return;
// else if(input.indexOf("test100") >= 0) {
//   window.location.hash = 'test100';
//   return;
// }
        }
    }
}

Quando escrevo test100 no prompt, ele irá para onde coloquei span id = "test100" no arquivo html.

Eu uso o Google Chrome.

Nota: Essa ideia vem do link na mesma página usando

<a href="#test100">Test link</a>

qual clique enviará para a âncora. Para que ele funcione várias vezes, a partir da experiência precisa recarregar a página.

O crédito para as pessoas no stackoverflow (e possivelmente na stackexchange também) não se lembra de como reuni todos os pedaços. ☺