Zusammenfassung der jQuery-Methoden zum Erzielen reibungsloser Sprungeffekte von Ankerpunkten innerhalb der page

Zusammenfassung der jQuery-Methoden zum Erzielen reibungsloser Sprungeffekte von Ankerpunkten innerhalb der page_jquery

WBOY

Freigeben： 2016-05-16 15:59:56

Original

1361 Leute haben es durchsucht

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>

Nach dem Login kopieren

Eine einfachere Implementierungsmethode:

Der Code besteht nur aus einem Satz

Code kopieren Der Code lautet wie folgt:

$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);

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

Ein Beispiel für die erste Form ist wie folgt

.animate({property1: 'value1', property2: 'value2'},
    speed, easing, function() {
      alert('The animation is finished.');
    });

Nach dem Login kopieren

Der Code zum Implementieren des Ankerpunktsprungs in diesem Artikel verwendet die erste Form

$("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

Die Methode animate() hat auch eine zweite Aufrufform

.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
});

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.