Ankerspringen mit Javascript

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

Ich habe zwei Probleme mit Ankern.

Das Hauptziel sollte sein, eine schöne, saubere 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>

Okay, wenn Sie auf einen der Links klicken, ändert sich die URL automatisch

www.domain.com/page#1

Am Ende sollte dies nur sein:

www.domain.com/page

So weit, ist es gut. Das zweite ist, wenn Sie im Internet nach diesem Problem suchen, werden Sie javascripteine Lösung finden.

Ich habe diese Funktion gefunden:

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

und Aufrufen dieser Funktion mit:

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

wie wird das gleiche sein wie vorher. 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 wirklich dankbar.

Vielen Dank.

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

Hier ist ein fauler Weg, dies 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 wird verwendet replaceState, um die URL zu manipulieren. Wenn Sie auch Unterstützung für IE wünschen , 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 weitere mit Übergang: http://jsfiddle.net/DerekL/x3edvp4t/

Sie können auch verwenden .scrollIntoView:

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

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

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

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

Diese Methode lädt die Website nicht neu und legt den Fokus auf die Anker, die für den Bildschirmleser benötigt werden.

Nicht genug Vertreter für einen Kommentar.

Die auf getElementById () basierende Methode in der ausgewählten Antwort funktioniert nicht, wenn der Anker gesetzt, nameaber nicht idgesetzt wurde (was nicht empfohlen wird, aber in freier Wildbahn geschieht).

Denken Sie daran, wenn Sie keine Kontrolle über das Dokument-Markup haben (z. B. Webextension).

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

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

Denn wenn du es tust

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

Sie laden eine neue Seite, Sie 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>

Ich habe eine Schaltfläche für eine Eingabeaufforderung, die beim Klicken den Anzeigedialog öffnet. Dann kann ich schreiben, was ich suchen möchte, und es wird an dieser Stelle auf der Seite angezeigt. Es verwendet Javascript, um den Header zu beantworten.

In der HTML-Datei habe ich:

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

Auf der .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 , wird es an die Stelle verschoben, an der ich span id = "test100" in die HTML-Datei eingefügt habe.

Ich benutze Google Chrome.

Hinweis: Diese Idee stammt aus dem Verknüpfen auf derselben Seite mit

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

was beim Klicken an den Anker gesendet wird. Damit es mehrmals funktioniert, muss die Seite aus Erfahrung neu geladen werden.

Dank an die Leute bei stackoverflow (und möglicherweise auch an stackexchange) kann ich mich nicht erinnern, wie ich all die Kleinigkeiten gesammelt habe. ☺