web-dev-qa-db-de.com

ankerspringen mit Javascript

Ich habe eine Frage, die sehr oft gefunden wird. Das Problem ist, dass nirgends eine explizite Lösung gefunden werden kann.

Ich habe zwei Probleme in Bezug auf Anker.

Das Hauptziel sollte darin bestehen, eine Nice-Clean-URL ohne Hashes zu erhalten, während Anker verwendet werden, um auf eine Seite zu springen.

Die Struktur der Anker ist also:

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

Wenn Sie auf einen der Links klicken, ändert sich die URL automatisch in 

www.domain.com/page#1

Am Ende sollte das nur sein:

www.domain.com/page

So weit, ist es gut. Die zweite Sache ist, wenn Sie das Internet nach diesem Problem durchsuchen, finden Sie javascript als Lösung.

Ich habe diese Funktion gefunden:

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

und Aufruf dieser Funktion mit:

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

was wird das gleiche wie vorher sein. Der Hash wird der URL hinzugefügt. Ich habe auch hinzugefügt

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

ohne Erfolg. Wenn es also jemanden gibt, der mir sagen könnte, wie ich das lösen kann, wäre ich sehr dankbar.

Danke vielmals.

104
bonny

Sie können die Koordinate des Zielelements abrufen und die Bildlaufposition darauf festlegen. Das ist aber so kompliziert.

Hier ist ein fauler Weg, das zu tun:

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

Dies verwendet replaceState , um die URL zu bearbeiten. Wenn Sie auch Unterstützung für IE möchten, müssen Sie dies auf komplizierte Weise tun:

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/
Eine andere mit Übergang: http://jsfiddle.net/DerekL/x3edvp4t/

Sie können auch .scrollIntoView verwenden:

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

(Nun, ich habe gelogen. Es ist überhaupt nicht kompliziert.)

161

Ich denke, es ist eine viel einfachere Lösung:

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

Diese Methode lädt nicht website neu, und legt den focus auf den Ankern fest, was für den Screenreader erforderlich ist.

11
Adam111p

Ich habe eine Schaltfläche für die Aufforderung, dass beim Anklicken der Anzeigedialog geöffnet wird und ich dann schreiben kann, wonach ich suchen möchte, und es wird zu dieser Stelle auf der Seite geleitet. Es verwendet Javascript, um die Kopfzeile zu beantworten.

In der .html-Datei habe ich: 

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

Auf die .js-Datei habe ich 

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;
// }
        }
    }
}

Wenn ich test100 in die Eingabeaufforderung schreibe, geht es dahin, wo ich span id = "test100" in der HTML-Datei platziert habe. 

Ich benutze Google Chrome.

Hinweis: Diese Idee stammt von der Verknüpfung auf derselben Seite mit

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

was beim Klicken zum Anker geschickt wird. Damit es mehrmals funktioniert, muss die Seite aus Erfahrung neu geladen werden. 

Die Leute von stackoverflow (und möglicherweise auch stackexchange) können sich nicht daran erinnern, wie ich all die Kleinigkeiten gesammelt habe. ☺

1
S.Doe_Dude

Nicht genug Repräsentant für einen Kommentar.

Die getElementById () - basierte Methode in der ausgewählten Antwort funktioniert nicht, wenn für den Anker name, jedoch nicht für id festgelegt wurde (was nicht empfohlen wird, dies aber in der Wildnis geschieht).

Wenn Sie die Dokumentmarkierung nicht steuern können (z. B. Web-Erweiterung), sollten Sie dies bedenken.

Die location-basierte Methode in der ausgewählten Antwort kann auch mit location.replace vereinfacht werden:

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

Weil, wenn du es tust 

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

Sie laden eine neue Seite, die Sie tun können:

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