Explication détaillée du code jQuery implémente un effet de défilement fluide vers le bas du point d'ancrage-js tutoriel-php.cn

Explication détaillée du code jQuery implémente un effet de défilement fluide vers le bas du point d'ancrage

小云云

Libérer： 2017-12-29 13:12:11

original

1182 Les gens l'ont consulté

Cet article vous apporte principalement un exemple de jQuery implémentant l'effet de défilement fluide vers le bas du point d'ancrage. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Effet d'implémentation :

Principe d'implémentation :

Utiliser jQuery animate() Méthode pour obtenir un effet de défilement fluide sur la page

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

Copier après la connexion

Exemple de code simple :

<!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>

Copier après la connexion

Recommandations associées :

Effets spéciaux de défilement d'images

code angulaire pour un défilement de texte transparent de haut en bas

Effet de défilement de page CSS3+JQUERY code_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!