Wenn wir durch die Navigation zum Inhalt scrollen, wischen wir einfach über Ankerpunkte und springen ohne Scrolleffekt direkt zum Inhalt. Außerdem hat der URL-Link am Ende einen „kleinen Schwanz“. Genau wie #keleyi. Heute werde ich einen von jquery erstellten Scroll-Spezialeffekt vorstellen, der nicht nur die Scroll-Geschwindigkeit festlegen kann, sondern auch keinen „kleinen Schwanz“ im URL-Link hat.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现页面内锚点平滑跳转</title><base target="_blank" />
<style type="text/css">
#hovertree {
height: 800px;
background: red;
text-align:center;color:white;
}
#keleyi {
height: 800px;
background: green;text-align:center;color:white;
}
#myslider {
height: 800px;
background: black;text-align:center;color:white;
}
#zonemenu {
height: 800px;
background: yellow;text-align:center;
}
.keleyilink{position:fixed;}
.keleyilink a {text-decoration:none;}
</style>
</head>
<body>
<div class="keleyilink">
<a href="javascript:scroll('hovertree');" target="_self">HoverTree</a>
<a href="javascript:scroll('keleyi');" target="_self">KKK</a>
<a href="javascript:scroll('myslider');" target="_self">myslider</a>
<a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a>
</div>
<div id="hovertree">hovertree
<br /><br /><br /><a href="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效库</a>
</div>
<div id="keleyi">jb51</div>
<div id="myslider">myslider</div>
<div id="zonemenu">zonemenu</div>
<script src="jquery/jquery-1.11.3.min.js"></script>
<script src="jquery.hovertreescroll.js"></script>
<script>
function scroll(id) {
$("#" + id).HoverTreeScroll(1000);
}
</script>
</body>
</html>
Eine einfachere Implementierungsmethode:
Der Code besteht nur aus einem Satz
Die animate()-Methode wird verwendet, um eine Reihe benutzerdefinierter CSS-Animationen zu implementieren. Es gibt zwei aufrufende Methoden
Das erste Formular akzeptiert 4 Parameter, wie unten gezeigt
.animate( Eigenschaften [, Dauer] [, Erleichterung] [, vollständig])
Eigenschaften – eine Karte mit Stileigenschaften und -werten
Dauer – optionaler Geschwindigkeitsparameter, der entweder eine voreingestellte Zeichenfolge oder ein Millisekundenwert
sein kann
Beschleunigung – Optionaler Beschleunigungstyp. jQuery hat nur zwei Standardtypen: Swing und Linear. Um andere Effekte zu verwenden, müssen Sie ein Beschleunigungs-Plug-in installieren
abgeschlossen – optionale Rückruffunktion, aufgerufen, wenn die Animation endet
.animate({property1: 'value1', property2: 'value2'},
speed, easing, function() {
alert('The animation is finished.');
});
$("html,body") stellt das Animieren von HTML- oder Body-Elementen dar, d. h. das Ändern ihrer CSS-Attributwerte
scrollTop ist der zu ändernde Attributwert, der die Strecke darstellt, um die die Bildlaufleiste verschoben wird. Hier stellt er die Höhe des HTML-Codes (Körpers) dar, der nach dem Herunterziehen der Browser-Bildlaufleiste vom oberen Rand des Browsers verdeckt wird
$("#elementid").offset().top ist die Höhe des HTML-Codes (Körper), der vom oberen Rand des Browsers ausgeblendet werden muss. Es stellt den absoluten Abstand vom oberen Rand des Elements mit der ID elementid dar oben auf der Webseite (nicht oben im sichtbaren Bereich des Browsers).
1000 bedeutet, dass die Animationszeit 1 Sekunde beträgt
.animate( Eigenschaften, Optionen)
Eines ist die Attributzuordnung und das andere ist die Optionszuordnung. Tatsächlich kapselt der zweite Parameter hier die 2-4 Parameter der ersten Form in einer anderen Zuordnung und fügt zwei Optionen hinzu. Der Code für das zweite Formular lautet wie folgt:
.animate({
property1: 'value1',
property2: 'value2'
}, {
duration: 'value',
easing: 'value',
complete: function(){
alert('The animation is finished.');
},
queue: boolen,
step: callback
});
