l'ancora che salta usando JavaScript

Ho una domanda che verrà trovata molto spesso. Il problema è che da nessuna parte è possibile trovare una soluzione esplicita.

Ho due problemi per quanto riguarda le ancore.

L'obiettivo principale dovrebbe essere quello di ottenere un bel URL pulito senza hash al suo interno mentre si usano le ancore per saltare su una pagina.

Quindi la struttura delle ancore è:

<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 fai clic su uno dei link, l'URL cambierà automaticamente in

www.domain.com/page#1

Alla fine questo dovrebbe essere solo:

www.domain.com/page

Fin qui tutto bene. Ora la seconda cosa è che quando cerchi quel problema su Internet troverai javascriptuna soluzione.

Ho trovato questa funzione:

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

e chiamando quella funzione con:

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

quale sarà lo stesso di prima. Aggiungerà l'hash all'URL. Ho anche aggiunto

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

senza successo. Quindi, se c'è qualcuno che potrebbe dirmi come risolvere questo, lo apprezzerei davvero.

Molte grazie.

È possibile ottenere le coordinate dell'elemento target e impostare la posizione di scorrimento su di esso. Ma è così complicato.

Ecco un modo più pigro per farlo:

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.
}

Questo utilizza replaceStateper manipolare l'URL. Se desideri anche il supporto per IE , dovrai farlo in modo complicato :

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/
Un altro con transizione: http://jsfiddle.net/DerekL/x3edvp4t/

Puoi anche usare .scrollIntoView:

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

_{(Beh, ho mentito. Non è affatto complicato.)}

Penso che sia una soluzione molto più semplice:

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

Questo metodo non ricarica il sito Web e pone l' attenzione sugli ancoraggi necessari per lo screen reader.

Rappresentante insufficiente per un commento.

Il metodo basato su getElementById () nella risposta selezionata non funzionerà se l'ancoraggio è namestato idimpostato ma non è impostato (cosa non consigliata, ma si verifica in natura).

Qualcosa da tenere a mente se non si ha il controllo del markup del documento (ad esempio estensione web).

Il locationmetodo basato nella risposta selezionata può anche essere semplificato con location.replace:

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

Perché quando lo fai

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

Carica una nuova pagina, puoi fare:

<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>

Ho un pulsante per un prompt che su clic apre la finestra di dialogo del display e quindi posso scrivere ciò che voglio cercare e va in quella posizione sulla pagina. Usa javascript per rispondere all'intestazione.

Sul file .html ho:

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

Sul file .js che ho

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 scrivo test100 nel prompt, andrà a dove ho inserito span id = "test100" nel file html.

Uso Google Chrome.

Nota: questa idea viene dal collegamento sulla stessa pagina utilizzando

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

che al clic invierà all'ancora. Perché funzioni più volte, per esperienza è necessario ricaricare la pagina.

Ringraziamo le persone di StackOverflow (e possibilmente anche StackExchange) non riesco a ricordare come ho raccolto tutti i pezzi. ☺