Comment utiliser jQuery pour obtenir un défilement fluide de la page-js tutoriel-php.cn

Comment utiliser jQuery pour obtenir un défilement fluide de la page

不言

Libérer： 2021-04-26 17:18:45

original

5516 Les gens l'ont consulté

Comment utiliser jQuery pour obtenir un défilement fluide sur la page : ouvrez d'abord le fichier de code correspondant ; puis utilisez la balise d'animation de jQuery pour obtenir un défilement fluide.

Comment utiliser jQuery pour obtenir un défilement fluide de la page

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 3.2.1, ordinateur Dell G3.

Le défilement fluide fait référence au comportement de défilement au sein d'une page. Dans les pages Web, je vois souvent des boutons tels que "Retour en haut". Cet article suit. Présentons comment utiliser jQuery. pour obtenir un défilement fluide.

Comment obtenir un défilement fluide

Le code Comment utiliser jQuery pour obtenir un défilement fluide de la page est le suivant

$(function(){
  $(&#39;a[href^="#"]&#39;).click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? &#39;html&#39; : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

Copier après la connexion

Le code ci-dessus peut obtenir un défilement fluide, vous peut changer "speed" pour changer la vitesse de défilement, et en renvoyant "false" à la fin, nous essayons de ne pas affecter l'URL.

Comme WordPress est en conflit avec "$", nous remplaçons "$" par "jQuery", ci-dessous nous utilisons la balise d'animation de jQuery pour obtenir un défilement fluide.

Regardons le exemple spécifique

Le code est le suivant

Code HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $(function(){
        $(&#39;a[href^="#"]&#39;).click(function() {
          var speed = 400; 
          var href= $(this).attr("href");
          var target = $(href == "#" || href == "" ? &#39;html&#39; : href);
          var position = target.offset().top;
          $(&#39;body,html&#39;).animate({scrollTop:position}, speed, &#39;swing&#39;);
          return false;
        });
      });
    </script>
    <title>jQuery</title>
  </head>
  <body>
    <h1 id="index">目录</h1>
    <ul>
      <li><a href="#1">sample1</a></li>
      <li><a href="#2">sample2</a></li>
      <li><a href="#3">sample3</a></li>
      <li><a href="#4">sample4</a></li>
    </ul>
    <div id="1">
      <h2>sample1</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
    <div id="2">
      <h2>sample2</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
    <div id="3">
      <h2>sample3</h2>
      <a class="button" href="#index">Topへ</a>
      </div>
    <div id="4">
      <h2>sample4</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
  </body>
</html>

Copier après la connexion

CSS code

div{
 height: 1000px;
}

Copier après la connexion

Les résultats d'exécution sont les suivants : seule la partie supérieure est une capture d'écran, et il y a sample1, sample2, sample3 et sample4 ci-dessous.

Comment utiliser jQuery pour obtenir un défilement fluide de la page