Web-Frontend
js-Tutorial
Wie füge ich Ankerpunkte zur Seite hinzu? Zwei Möglichkeiten zum Hinzufügen von Ankerpunkten
Wie füge ich Ankerpunkte zur Seite hinzu? Zwei Möglichkeiten zum Hinzufügen von Ankerpunkten
Wie füge ich Ankerpunkte zur Seite hinzu? In diesem Artikel werden Ihnen zwei Methoden zum Hinzufügen von Ankerpunkten zur Seite vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Methode 1: Verwenden Sie das a-Tag, um
1 hinzuzufügen. Springen Sie durch Festlegen des href-Attributs des a-Tags zur angegebenen ID Tag in der Seitenposition
2. Fügen Sie # als Bezeichner vor dem href-Attributwert des a-Tags hinzu, um anzuzeigen, dass es innerhalb der aktuellen Seite springt
Einfacher Fall:
<html> <head></head> <body> <!--设置锚点的a标签--> <a href='#miao'>跳一跳</a> <br /> <!--跳转到的锚点位置--> <h3 id='miao'>跳到这里..</h3> </body> </html>
Diese Methode hat viele Nachteile, wie z. B. das Ändern der Adressleistenparameter, abrupte Sprünge, Unfreundlichkeit gegenüber Benutzern usw.
Wenn Sie also mehr auf Details achten und zwanghaft sind- Bei einer Zwangsstörung wird in diesem Zusammenhang die folgende Methode empfohlen.
Methode 2: Verwenden Sie die animierte Animation von jQuery zum Springen
Ohne Unsinn zu reden, beginnen wir mit dem Code:
<html>
<head>
<title></title>
<script>
$(document).ready(function () {
//点击触发事件
$("#jumpNow").click(function () {
$("html,body").animate({
scrollTop: $("#imhere").offset().top//跳转到的位置
}, {
duration: 400,//预定速度
easing: "swing",//动画效果.swing:在开头/结尾移动慢，在中间移动快;"linear": 匀速移动
});
});
});
</script>
</head>
<body>
<!--设置锚点的标签-->
<span id='jumpNow'>跳一跳</span>
<br />
<!--跳转到的锚点位置-->
<h3 id='imhere'>跳到这里...</h3>
</body>
</html>animate von jQuery ist eine Funktion, die eine Seitenanimation implementiert. Sie ist relativ leistungsfähig und reicht aus, um einen Ankerpunktsprung zu implementieren. Wenn Sie die Animationsfunktion erlernen möchten, können Sie sich auf Folgendes beziehen: [jQuery-Detailliertes Lernen von Animate (1)]
Diese Methode kann die Geschwindigkeit und Methode des Animationssprungs steuern , und ändert die Adressleiste nicht. Die Parameter sind relativ elegant. Es wird empfohlen, diese Methode zu verwenden!
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Wenn Sie sich weitere Video-Tutorials ansehen möchten, empfehlen wir: jQuery-Tutorial!
Das obige ist der detaillierte Inhalt vonWie füge ich Ankerpunkte zur Seite hinzu? Zwei Möglichkeiten zum Hinzufügen von Ankerpunkten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1387
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
