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

Node.js verwendet die Express-Fileupload-Middleware zum Hochladen von Dateien

Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy

Node.js verwendet die Express-Fileupload-Middleware zum Hochladen von Dateien

Zabbix-Überwachungslösung – die neueste offizielle Version 4.4 [empfohlen]

Detaillierte Erläuterung der Implementierung einer regelmäßigen Sicherung von MySQL-Datenbanktabellen

Detaillierte Schritte zur Installation von Python 3.7 auf CentOS 6.5

Mysql Master-Slave-Synchronisation Last_IO_Errno:1236 Fehlerlösung

Detailliertes Tutorial zur Installation und Konfiguration von MySql 5.7.17 winx64

Lösung für Primärschlüsselkonflikte, wenn innodb_index_stats beim Importieren von Sicherungsdaten einen Fehler meldet

So konfigurieren Sie den Redis-Sentinel-Modus in Docker (auf mehreren Servern)

Klasse in Front-End-JavaScript

Acht gängige SQL-Verwendungsbeispiele in MySQL

Artikel empfehlen

So löschen Sie die Validierungsaufforderung bei der Elementformularvalidierung

Vue implementiert die Shake-Funktion (kompatibel mit ios13.3 und höher)

MySQL-Abfrageoptimierung mit benutzerdefinierten Variablen

Implementierungsschritte zur Installation eines FTP-Servers in Ubuntu 14.04

So zeigen Sie MySql-Indizes an und optimieren sie

Docker Compose-Übung und Zusammenfassung

JavaScript implementiert einen langen Bild-Scroll-Effekt

Abkürzung für HTML DOCTYPE

Implementierung des Übergangseffekts für konkave Rechtecke mit linearem Farbverlauf in CSS

Detaillierte Erklärung, wie Angular mit unerwarteten Ausnahmefehlern umgeht

So mounten Sie die CD, um das RPM-Paket unter Linux zu finden

Zusammenfassung der Verwendung von MySQL-Datums- und Uhrzeitfunktionen

So installieren und konfigurieren Sie das Orchestrierungstool Docker Compose in Docker.v19

Detaillierte Schritte zum Bereitstellen eines Tomcat-Servers basierend auf IDEA

Detaillierte Erklärung der For-Schleife und der doppelten For-Schleife in JavaScript