Maison > Article > interface Web > Explication détaillée du code jQuery implémente un effet de défilement fluide vers le bas du point d'ancrage
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
$('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; });
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('click', 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'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 $('html, body').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>
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!