NetPlusMédia

Animer une ancre HTML avec Jquery

Retour

Apprendre à créer une animation javascript au clic sur une ancre grâce à Jquery



Ce programme fonctionne avec la librairie Jquery

index.html

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  2. 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
  4. <title>Animer une ancre HTML avec Jquery</title>
  5. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  6.  
  7.  
  8. <!-- Style CSS -->
  9. <link rel='stylesheet' type='text/css' href='animation_ancre.css' />
  10.  
  11.  
  12.  
  13. </head>
  14.  
  15.  
  16. <div class='animation_ancre_haut'>
  17. <!-- Lien pour aller en bas de la page -->
  18. <a href="#bas">Descendre</a>
  19. </div>
  20.  
  21.  
  22. <!-- Ancre du bas de la page -->
  23. <a name="bas"'></a>
  24. Vous &ecirc;tes bien arriv&eacute; !
  25.  
  26.  
  27. <!-- Javascript -->
  28. <script language='Javascript' type='text/javascript'
  29. src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
  30. <script language='Javascript' type='text/javascript'
  31. src='animation_ancre.js'></script>
  32.  
  33. </body>
  34. </html>

animation_ancre.js

  1. jQuery().ready(function(){
  2.  
  3. //animation des ancres
  4. $('a[href^=#]').click(function(){
  5.  
  6. cible = $(this).attr('href');
  7.  
  8. //on va supprimer le #
  9. cible = cible.substr(1 , (cible.length-1) );
  10.  
  11. //hauteur o se trouve l'lment
  12. hauteur = $("a[name="+cible+"]").offset().top;
  13.  
  14. //animation
  15. $('html,body').animate({scrollTop:hauteur} , 1000);
  16.  
  17. return false;
  18.  
  19. });
  20.  
  21. });

animation_ancre.css

  1. .animation_ancre_haut{
  2. width:100%;
  3. height:2000px;
  4. }

Démonstration

Animer une ancre HTML avec Jquery Vous êtes bien arrivé !
ndoyestory    Posté le : 08/02/2013 - 22:19
c'est cool
    Posté le : 17/06/2015 - 09:01
Top! Merci

Laissez-nous un commentaire


Votre pseudo/nom/prénom :
Votre commentaire :
Plan du site - Contact - Google+ - FaceBook - Twitter