Maison >interface Web >js tutoriel >Comment utiliser jQuery pour obtenir un défilement fluide de la page

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

不言original: 2018-12-26 16:43:555549parcourir

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.

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

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>

CSS code

div{
 height: 1000px;
}

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

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!

JavaScript jquery css html WordPress

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：Quel est l’attribut id en HTML ? Utilisation de l'attribut idArticle suivant：Quel est l’attribut id en HTML ? Utilisation de l'attribut id

Articles Liés

Voir plus