Heim > Artikel > Web-Frontend > 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
- 青灯夜游nach vorne
- 2018-11-13 14:06:374429Durchsuche
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!