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.
17 commentaires ↓
Je trouve l’idée intéressante, tu as un exemple visible ?
On peut voir une tite démo ?
Je suis curieux notamment de savoir si ça n’empêche pas le navigateur d’enregistrer le clic et de permettre de revenir en arrière dans la page (comme je l’avais vu sur certains sites).
(Au passage, il manque un background-repeat:no-repeat; sur la liste MarkItUp).
Si je ne me trompe pas, c’est le principe d’un de mes plugins SPIP préférés, « Ancres douces » que l’on peut apprécier sur les blogs du Monde diplo : afficher un billet commenté, puis sur les ancres de la page qui permettent de sauter aux commentaires, puis d’un commentaire à l’autre, etc.
Comme toi, j’aime beaucoup cet effet, parce qu’il explicite les liens dans la page.
Il me semble qu’il existe un petit plugin « ScrollTo » qui ajoute cet effet de défilement doux en faisant un add-on de la fonction javascript de base « window.scrollTo ».
Voici l’exemple qui va bien rapidement codé.
Goulven : OVH a eu quelques soucis cette après-midi, c’est sans doute ça.
tetue : du coup, tu charges quelques kilos supplémentaires avec les plugins jQuery d’Ariel Flesler, non ? Ils permettent bien plus de choses mais pour le coup, je n’en avais pas besoin.
Shemu : c’est justement le plugin cité plus haut il me semble.
Bien.
Je sape le moral de tout le monde ?
Comme je le disais sur spip-contrib :
Et c’est le même problème ici… désolé, hein. Je n’ai pas de solution, mais il m’est impossible d’entériner ce genre de système tant que je n’aurai pas de solution à prposer.
Je ne comprend pas Stef, j’ai justement un comportement normal au niveau de l’historique moi.
Tu as testé avec un navigateur particulier ?
Je viens de le faire avec Firefox, Safari et Opera sous mac. Idem sous Firefox et IE PC.
Tu ne voudrais pas reproduire ton article sur jquery.info ?
@Vincent : tu as un Mac ou un Windows sous la main ?
Firefox/Win : je clique sur « bas », ça scrolle gentiment.
Je fais back et je reste comme un gros niais en bas de page… et je suis triste…
Ok Stéphane, compris !
Le souci devrait pouvoir se corriger facilement en ajoutant une « ancre vide » au chargement de la page non ?
Je vais essayer ça.
Bon… ça ne marche pas. Je suis triste aussi tiens.
Voilà. Tu vois mieux mon problème, maintenant ? Pour l’instant, pour moi, c’est insoluble.
C’est problématique oui.
Néanmoins le confort apporté (notamment pour les utilisateurs néophytes) est certain. Et le cas d’utilisation que tu pointes du doigt est relativement peu fréquent.
J’avoue que je suis mitigé…
Tu conseilles de mettre à la poubelle dans tous les cas toi ?
Je cherchais justement un effet similaire sur des pages faisant déjà appel à la bibliothèque jquery. ce script est vraiment très bien
Pour contourner le problème évoqué par Stéphane (ne pas casser l’historique de navigation), il suffit de remplacer return (false) par void(0)
On dirait bien que ça marche : merci Bruno !
Bravo Bruno ! Génial !
(je vais vite le redire sur spip-contrib)
Bonjour, etd’abord bravo, cet effet est exactement ce que je cherchais. A un bémol près, que je vous soumets : avant que le script ne fasse « glisser » la page, l’ancre html a le temps de fonctionner. Du coup, avant l’effet de glissement, on a le temps de voir l’endroit cible pendant une fraction de seconde. Pour détailler ce qui se passe, au moment du clic, la page saute instantanément à la position de l’ancre, puis revient instantanément au point de départ pour retourner (en glissant harmonieusement, cette fois) vers la position de l’ancre. Lorsque la page ne contient que du texte, l’oeil ne s’en rend pas compte, mais lorsqu’il y a des images en décor de page, c’est flagrant, on a le sentiment d’un bug. Les programmeurs émérites que vous êtes auraient-ils une solution (je ne suis qu’un modeste graphiste ignorant de javascript, avec seulement quelques bases en AS3) ?
Laisser un commentaire