Animer une ancre HTML avec Jquery

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

Ce programme fonctionne avec la librairie Jquery

index.html

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
<title>Animer une ancre HTML avec Jquery</title>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
 
 
<!-- Style CSS -->
<link rel='stylesheet' type='text/css' href='animation_ancre.css' />
 
 
 
</head>
<body>
 
 
<div class='animation_ancre_haut'>
 <!-- Lien pour aller en bas de la page -->
 <a href="#bas">Descendre</a>
</div>
 
 
<!-- Ancre du bas de la page -->
<a name="bas"'></a>
Vous &ecirc;tes bien arriv&eacute; !
 
 
<!-- Javascript -->
<script language='Javascript' type='text/javascript'
 src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script language='Javascript' type='text/javascript'
 src='animation_ancre.js'></script>
 
</body>
</html>

Télécharger le fichier

animation_ancre.js

jQuery().ready(function(){
 
 //animation des ancres
 $('a[href^=#]').click(function(){
 
 cible = $(this).attr('href');
 
 //on va supprimer le #
 cible = cible.substr(1 , (cible.length-1) );
 
 //hauteur o� se trouve l'�l�ment
 hauteur = $("a[name="+cible+"]").offset().top;
 
 //animation
 $('html,body').animate({scrollTop:hauteur} , 1000);
 
 return false;
 
 });
 
});

Télécharger le fichier

animation_ancre.css

.animation_ancre_haut{
 width:100%;
 height:2000px;
}

Démonstration

Animer une ancre HTML avec Jquery

Descendre

Vous êtes bien arrivé !