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

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Libérer： 2016-05-16 15:06:21

original

1866 Les gens l'ont consulté

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>

Copier après la connexion

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

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

Copier après la connexion

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 .
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>

Copier après la connexion

Remarque :

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

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

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，结果就是回到页面顶端。


    });
    ...
  });

Copier après la connexion

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.