Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy

Lassen Sie uns nun mehrere Situationen zur Steuerung von Ankerpunkten zusammenfassen:

1. Auf derselben Seite

<a name="add"></a><!-- Ankerpunkt definieren-->
<a href="#add">Zum Hinzufügen springen</a>

2. Auf verschiedenen Seiten befindet sich der Anker in a.html, und der Link von einer anderen Seite springt zu diesem Anker

<a href="a.html#add">Zu a.add springen</a>

3. Das Klicken auf einen Link löst ein JS-Ereignis aus und springt zum Ankerpunkt. Es gibt zwei Möglichkeiten, damit umzugehen:

Der Erste:

<a href="#add" onclick="add()">Löst die Add-Funktion aus und springt zum Add-Ankerpunkt</a>

Zweiter Typ:

<div id="divNode"><!-- Inhalt --></div><!-- Angenommen, es gibt einen Knoten, zu dem gesprungen werden muss-->
<a href="#" onclick="document.getElemetnById('divNode').scrollIntoView(true);return false;">Realisieren Sie den Ankereffekt durch scrollIntoView</a>

Es gibt mehrere Möglichkeiten, die Ankerpositionierung in HTML festzulegen, und zwar mithilfe der ID-Positionierung, der Namenspositionierung und der JS-Positionierung. Diese Methoden sind nicht unbedingt die vollständigsten, daher können Sie nur auf die folgenden verweisen

1. Verwenden Sie die ID-Positionierung:

<a href="#1F" name="1F">Ankerpunkt 1</a> 
<div name="1F"> 
<p> 
11111111111 
</br> 
11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br> 
</p> 
</div>

Diese Positionierung kann gezielt auf jedes beliebige Label angewendet werden.

2. Nutzen Sie die Namenspositionierung:

<a href="#5F">Ankerpunkt 5</a> 
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> 
<a name="5F">1111111</href>

Das Name-Attribut kann nur zum Auffinden des A-Tags verwendet werden, nicht jedoch zum Auffinden anderer Tags wie beispielsweise Div.

3. Verwenden Sie die JS-Positionierung

<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>

Beispiele:

js Ankerpunkt glatte Positionierung

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <Kopf>
        <style type="text/css" mce_bogus="1">
            div.test {
                Breite: 400px;
                Rand: 5px automatisch;
                Rand: 1px durchgezogen #ccc;
            }
             
            div.test stark {
                Schriftgröße: 16px;
                Hintergrund: #fff;
                Rahmen unten: 1px durchgezogen #aaa;
                Rand: 0;
                Anzeige: Block;
                Polsterung: 5px 0;
                Textdekoration: Unterstreichen;
                Farbe: #059B9A;
                Cursor: Zeiger;
            }
             
            div.test p {
                Höhe: 400px;
                Hintergrund: #f1f1f1;
                Rand: 0;
            }
        </Stil>
        <Skripttyp="text/javascript">
             
            Funktion intval(v){
                v = parseInt(v);
                gibt isNaN(v) zurück? 0: v;
            } // Elementinformationen abrufen Funktion getPos(e){
                var l = 0;
                var t = 0;
                var w = intval(e.style.width);
                var h = intval(e.style.height);
                var wb = e.offsetWidth;
                var hb = e.offsetHeight;
                während (e.offsetParent) {
                    l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
                    t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
                    e = e.Parent-Offset;
                }
                l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
                t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
                zurückkehren {
                    x: l,
                    y: t,
                    w: w,
                    h: h,
                    wb: wb,
                    hb: hb
                };
            } // Eine Information abrufen Funktion getScroll(){
                var t, l, b, h;
                wenn (Dokument.Dokumentelement && Dokument.Dokumentelement.ScrollTop) {
                    t = Dokument.documentElement.scrollTop;
                    l = Dokument.Dokumentelement.ScrollLeft;
                    w = Dokument.Dokumentelement.Scrollbreite;
                    h = Dokument.Dokumentelement.Scrollhöhe;
                }
                anders
                    wenn (Dokument.Text) {
                        t = Dokument.Body.ScrollTop;
                        l = Dokument.Body.ScrollLeft;
                        w = Dokument.Textkörper.Scrollbreite;
                        h = Dokument.Textkörper.Scrollhöhe;
                    }
                zurückkehren {
                    t: t,
                    ll,
                    w: w,
                    h:h
                };
            } //?Punkt (Anker)?Sanfter Sprung?   
            Funktion Scroller (el, Dauer) {
                wenn (Typ von el != 'Objekt') {
                    el = document.getElementById(el);
                }
                wenn (!el)
                    zurückkehren;
                var z = dies;
                z.el = el;
                zp = getPos(el);
                zs = getScroll();
                z.clear = Funktion(){
                    Fenster.ClearInterval(z.timer);
                    z.timer = null
                };
                zt = (neues Datum).getTime();
                z.Schritt = Funktion(){
                    var t = (neues Datum).getTime();
                    var p = (t - zt) / Dauer;
                    wenn (t >= Dauer + zt) {
                        z.clear();
                        Fenster.setTimeout(Funktion(){
                            z.scroll(zpy, zpx)
                        }, 13);
                    }
                    anders {
                        st = ((-Math.cos(p * Math.PI) / 2) + 0,5) * (zpy - zst) + zst;
                        sl = ((-Math.cos(p * Math.PI) / 2) + 0,5) * (zpx - zsl) + zsl;
                        z.scroll(st, sl);
                    }
                };
                z.scroll = Funktion(t, l){
                    Fenster.scrollTo(l, t)
                };
                z.timer = Fenster.Intervall setzen(Funktion(){
                    z.Schritt();
                }, 13);
            }
        </Skript>
    </Kopf>
    <Text>
        <div Klasse="Test">
            <a name="header_1" id="header_1"></a>
            <strong onclick="javascript:scroller('header_4', 800);">header_1 --> header_4</strong>
            <p>
            </p>
        </div>
        <div Klasse="Test">
            <a name="header_2" id="header_2"></a>
            <strong onclick="javascript:scroller('header_5', 800);">header_2 --> header_5</strong>
            <p>
            </p>
        </div>
        <div Klasse="Test">
            <a name="header_3" id="header_3"></a>
            <strong onclick="javascript:scroller('header_6', 800);">header_3 --> header_6</strong>
            <p>
            </p>
        </div>
        <div Klasse="Test">
            <a name="header_4" id="header_4"></a>
            <strong onclick="javascript:scroller('header_7', 800);">header_4 --> header_7</strong>
            <p>
            </p>
        </div>
        <div Klasse="Test">
            <a name="header_5" id="header_5"></a>
            <strong onclick="javascript:scroller('header_3', 800);">header_5 --> header_3</strong>
            <p>
            </p>
        </div>
        <div Klasse="Test">
            <a name="header_6" id="header_6"></a>
            <strong onclick="javascript:scroller('header_2', 800);">header_6 --> header_2</strong>
            <p>
            </p>
        </div>
        <div Klasse="Test">
            <a name="header_7" id="header_7"></a>
            <strong onclick="javascript:scroller('header_1', 800);">header_7 --> header_1</strong>
            <p>
            </p>
        </div>
    </body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Ursachen und Lösungen für den Nginx 502 Bad Gateway-Fehler

>>: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.5.27 winx64

Drei Implementierungsmethoden für die MySQL-Kopiertabelle und die Grant-Analyse

Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy

Drei Implementierungsmethoden für die MySQL-Kopiertabelle und die Grant-Analyse

Adaptive Breitentabelle für HTML-Seiten

Installieren Sie CentOS 7 auf VMware14 – Grafik-Tutorial

JS generiert eindeutige ID-Methoden: UUID und NanoID

Im Vorstellungsgespräch wurde ich gefragt, ob select...for update die Tabelle oder die Zeile sperren würde.

Detaillierte Erklärung des Problems bei der Kombination von CSS-Ellipsen und -Auffüllungen

Einige Möglichkeiten zum Eliminieren doppelter Zeilen in MySQL

So verwenden Sie IDEA, um ein Webprojekt zu erstellen und es auf Tomcat zu veröffentlichen

Verwendung und Unterschiedsanalyse von „Ersetzen in“ und „Einfügen in“ beim Update doppelter Schlüssel in MySQL

MySQL nimmt die durch Kommas getrennten Werte aus einem Feld heraus, um ein neues Feld zu bilden

Artikel empfehlen

Detaillierte Erläuterung der Galera-Cluster-Bereitstellung im Clustermodus von MySQL

Zusammenfassung häufig verwendeter Escape-Zeichen in HTML

Beispiel für das Hinzufügen und Löschen von Bereichspartitionen in MySQL 5.5

Ein Debugging-Prozessprotokoll für chinesische Zeichentrickfiguren in der Startkonsole des Tomcat-Quellcodes

Was sind Ihre Grundsätze für die Gestaltung von Indizes? Wie lassen sich Indexfehler vermeiden?

JavaScript Voranalyse, Objektdetails

Fehlereinfügungsanalyse der Funktion „updatexml()“ von MySQL

Installieren des Betriebssystems Windows Server 2008 auf einer virtuellen Maschine

Das ausführliche Tutorial zum Herunterladen und Installieren von MySQL 8.0.15 ist für Anfänger ein Muss!

Einführung in Kubernetes (k8s)

So aktivieren Sie das Root-Konto in Ubuntu 20.04

Dieser Artikel zeigt Ihnen, was Vite mit der Anfrage des Browsers macht

So erzielen Sie mit Vue3 beispielsweise einen Lupeneffekt

Methoden und Schritte zum Bereitstellen einer GitLab-Umgebung basierend auf Docker

Das Vue-Projekt implementiert eine Fortschrittsbalkenfunktion für den Dateidownload