Detaillierte Code-Erklärung: jQuery implementiert den Ankerpunkt-Down-Scroll-Effekt-js-Tutorial-php.cn

Detaillierte Code-Erklärung: jQuery implementiert den Ankerpunkt-Down-Scroll-Effekt

小云云

Freigeben： 2017-12-29 13:12:11

Original

1271 Leute haben es durchsucht

Dieser Artikel enthält hauptsächlich ein Beispiel für die Implementierung des Ankerpunkt-Down-Scrolling-Effekts durch jQuery. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Implementierungseffekt:

Implementierungsprinzip:

Verwenden Sie jQuery animate() Methode zum Erzielen eines reibungslosen Scrolleffekts auf der Seite

$(&#39;html, body&#39;).animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});

Nach dem Login kopieren

Einfacher Beispielcode:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 // Add smooth scrolling to all links
 $("a").on(&#39;click&#39;, function(event) {
 
  // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {
   // Prevent default anchor click behavior
   event.preventDefault();
 
   // Store hash
   var hash = this.hash;
 
   // Using jQuery&#39;s animate() method to add smooth page scroll
   // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
   $(&#39;html, body&#39;).animate({
    scrollTop: $(hash).offset().top
   }, 800, function(){
  
    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
   });
  } // End if
 });
});
</script>
 <style>
body, html, .main {
  height: 100%;
}
 
section {
  min-height: 100%;
}
</style>
</head>
<body>
<a href="#section2" rel="external nofollow" style="
   font-size: 30px;
   font-weight: bold;
   text-align: center;
">点击此处平滑滚动到第二部分</a>
<p class="main">
 <section></section>
</p>
<p class="main" id="section2">
 <section style="
   background-color: #03c03c;
   color: #fff;
   font-size: 30px;
   text-align: center">
   SECTION 2
 </section>
</p>
</body>
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

Bild-Scrolling-Spezialeffekte

AngularJS-Code für nahtloses Auf- und Abscrollen von Text

CSS3+JQUERY-Seitenscrolleffekt code_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonDetaillierte Code-Erklärung: jQuery implementiert den Ankerpunkt-Down-Scroll-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!