Maison >interface Web >js tutoriel >jQuery implémente une animation de défilement simple effect_jquery

jQuery implémente une animation de défilement simple effect_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal: 2016-05-16 15:06:211867parcourir

L'idée de l'animation est très simple. Cliquez sur un élément de la page et la page défilera jusqu'à la position spécifiée. Voici une introduction aux résultats de mes 3 heures de recherche sur Baidu :

Le premier est la partie html :

<html>
<body>
<a>顶部</a>
<a>中部</a>
...<p>持续添加直到出现滚动条</p>...
</body>
</html>

Ajoutez d’abord deux éléments 3499910bf9dac5ae3c52d5ede7383485 Ajoutez ensuite l'élément 3499910bf9dac5ae3c52d5ede7383485 :

<html>
<body>
<a href="javascript:;" id="tab1">顶部</a>
<a href="javascript:;" id="tab2">中部</a>
...<p>持续添加直到出现滚动条</p>...
</body>

href="javascript:;" signifie probablement que l'élément a peut activer le code js. S'il n'est pas ajouté, le code sera invalide. Pas besoin d'en ajouter lors de l'utilisation du aa3581cda9cb05b6f35d32c2e98cc314.
Ensuite, introduisez jquery et écrivez le code :

<script src="js/jquery-1.10.2.min.js"></script>
<script>
  $(document).ready(function(){
    $("#tab1").click(function(){
      $("html,body").animate({scrollTop:'0px'},300);
    });
    $("#tab2").click(function(){
      $("html,body").animate({scrollTop:'600px'},300);
    });
  });
</script>

Remarque :

1. Il est préférable d'écrire le code sous l'instruction jquery introduite

2. L'identifiant doit correspondre à l'élément 3499910bf9dac5ae3c52d5ede7383485

3. "html,body" représente le mouvement global

4. ({scrollTop:'600px'},300); La valeur précédente est la distance de déplacement et la valeur suivante est le temps d'animation (l'unité est en millisecondes)

Après cette étape, le code s'exécutera.

Ce qui suit est une analyse détaillée du code jquery :

 $(document).ready(function(){
//这一句都要加，不加会出错，没有实际作用


    $("#tab1").click(function(){
    //$("#tab1")是选择器，click()是方法。意思是说对#tab1使用click方法


      $("html,body").animate({scrollTop:'0px'},300);
      //我理解的scrollTop是个变量属性，代表元素最顶端和当前浏览器显示区域上边沿之间的距离，所以这句话的意思是：让body的上边沿和浏览器可视区域上边沿距离为0px，结果就是回到页面顶端。


    });
    ...
  });

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.

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：Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)Article suivant：Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)

Articles Liés

Voir plus