Une fois n’est pas coutume, voici un petit script jQuery.
NB : Stéphane soulève un problème d’accessibilité dans les commentaires, ne passez pas outre.
Il permet lors de l’activation d’une ancre de déplacer progressivement l’ascenseur de la page en fonction. J’aime personnellement beaucoup cet effet car je trouve qu’il rend plus compréhensible l’utilisation des ancres.
var scrolling = function(){
var speed = 1000;
jQuery('a[href^="#"]').bind('click',function(){
var id = jQuery(this).attr('href');
if(id == '#')
goTo('body');
else
goTo(id);
return(false);
});
function goTo(ancre){jQuery('html,body').animate({scrollTop:jQuery(ancre).offset().top},speed,'swing',function(){
if(ancre != 'body')
window.location.hash = ancre;
else
window.location.hash = '#';
jQuery(ancre).attr('tabindex','-1');
jQuery(ancre).focus();
jQuery(ancre).removeAttr('tabindex');
});
}
};
Point par point, cela donne :
var scrolling = function(){
Déclaration de la fonction, qui sera à déclencher au chargement de la page.
var speed = 1000;
On choisi une vitesse pour l’effet. Ce paramètre peut être modifié à loisir.
jQuery('a[href^="#"]').bind('click',function(){
On intercepte le click sur les liens qui renvoient vers des ancres…
var id = jQuery(this).attr('href');
if(id == '#')
goTo('body');
else
goTo(id);
return(false);
Et on déclenche la fonction d’animation en fonction de la destination (haut de page ou ancre). On annule ensuite le comportement par défaut du lien.
function goTo(ancre){jQuery('html,body').animate({scrollTop:jQuery(ancre).offset().top},speed,'swing',function(){
L’astuce repose sur l’utilisation de la fonction animate, qui pour le coup simplifie bien le code.
if(ancre != 'body')
window.location.hash = ancre;
else
window.location.hash = '#';
En callback, on prend soin de changer le hash dans la barre d’adresse pour ne pas différer du comportement normal.
jQuery(ancre).attr('tabindex','-1');
jQuery(ancre).focus();
jQuery(ancre).removeAttr('tabindex');
});
}
};
On place enfin un tabindex négatif sur l’ancre, afin de pouvoir ensuite forcer le focus dessus. Ainsi, logiquement, même les lecteurs d’écrans devraient s’y retrouver.
On termine enfin par un peu de ménage.
N’hésitez pas à critiquer le tout ! La démo est disponible ici.