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

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

小云云original: 2017-12-29 13:12:111260parcourir

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

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Maîtrisez jQuery pour implémenter le cadre de dessin de la souris et sélectionner les données dans le cadreArticle suivant：Maîtrisez jQuery pour implémenter le cadre de dessin de la souris et sélectionner les données dans le cadre

Articles Liés

Voir plus