HTML-Anker-Link ohne blättern oder springen

Question

Ich habe verschiedene Links, die alle einzigartige IDs haben, die „pseudo-Anker.“ Ich möchte, dass sie die URL-Hash-Wert und der Klick Magie wirken sich auf alle durch ein Mootools Code behandelt wird. Allerdings, wenn ich auf die Links klicken sie bewegen sich (oder nach oben in einem Fall). Ich will nicht überall bewegen, sondern auch mein Javascript muß auszuführen und den Hash-Wert in dem URL-Update zu haben.

Simulierte Beispielcode:

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

Wenn Sie also auf der "Taste 1" Link klicken, könnte die URL sein http: // example.com/foo.php#button1

Hat jemand irgendwelche Ideen dafür? Einfach mit dem Scrollen einig Javascript Rückkehr Leere tötet, sondern auch meinen Javascript tötet wichtiger ist aber mehr (obwohl ich wahrscheinlich um, dass mit einer Onclick arbeiten könnte), verhindert, dass der Hash-Wert in der URL zu ändern.

Answer 1

Ich bin fehlt wahrscheinlich etwas, aber warum sie nicht einfach unterschiedliche IDs geben?

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

oder was auch immer Konvention Sie es vorziehen.

Answer 2

Der ganze Sinn eines Anker Link ist eine Seite zu einem bestimmten Punkt zu blättern. Also, wenn Sie nicht wollen, dass das geschehen kann, müssen Sie einen onclick Handler anhängen und false zurück. Auch nur soll es als Attribut hinzugefügt arbeiten:

<a href="#button1" id="button1" onclick="return false">button 1</a>

Eine Seite der Wirkung der oben ist, dass die URL selbst wird sich nicht ändern, falsche seit der Rückkehr wird die Veranstaltung abzusagen. Also, da Sie die URL tatsächlich ändern möchten, können Sie die window.location.hash Variable auf den Wert, der gewünscht wird (das ist die einzige Eigenschaft der URL, die Sie ohne den Browser ändern kann ein erneutes Laden zu zwingen). Sie können sich wahrscheinlich einen Event-Handler anhängen und so etwas wie window.location.hash = this.id nennen, obwohl ich nicht sicher bin, wie Mootools behandelt Ereignisse.

(Auch müssen Sie alle IDs eindeutig sein)

Answer 3

Sie können den Code verwenden unten Scrollen zu vermeiden:

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

Answer 4

Ich fand die Lösung. Hier speichere ich einen alten Standort aus href Aufruf und es wieder nach dem Scrollen

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

und im Körper der Seite

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a> 

Dank sitepoint

Answer 5

Auch preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }

Answer 6

Eine einfachere Möglichkeit wäre es wahrscheinlich als GET hinzuzufügen. Das heißt, http://example.com/foo.php?q=#button1 statt http://example.com/foo.php#button1

Dies hat keine Auswirkungen auf wie die Seite angezeigt wird (es sei denn Sie es wollen), und die meisten Skriptsprachen bereits Werkzeuge an der richtigen Stelle zu leicht (und sicher), um die Daten lesen.

Answer 7

Nun, hier sind wir 7 Jahre nach dieser Antwort veröffentlicht wurde und ich fand einen anderen Weg, um es Arbeit zu machen: einfach den window.location.hash weist auf einen nicht vorhandenen Anker! Es ist nicht für <a>s arbeiten, aber funktioniert perfekt in <div>s.

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

hat gut funktioniert in Chrome 56, Firefox 52 und Edge (IE?) 38. Ein weiterer guter Punkt ist, dass diese keine Konsole Fehler oder Warnungen erzeugt.

Hoffe, es hilft jemand außer mir.