Ancres douces

Publié le : 21 octobre 2008 – Dernière modification le 21 décembre 2021 – par Eric Lupinacci, Fil – 69 commentaires

1
2
3
4
5
28 votes

Lorsqu’on clique sur un lien qui mène vers une ancre dans la même page et que le navigateur « saute » brutalement jusqu’à cette ancre, le visiteur perd la notion de l’endroit où il se trouve et ne visualise pas la structure globale de la page. En termes d’ergonomie c’est assez mauvais, et on attend le navigateur qui trouvera la solution.

Dans l’immédiat, chacun peut améliorer cela sur son propre site SPIP. Le plugin Ancres douces fait une chose (et une seule) : il transforme toutes les ancres (<a href="#xxx">) des pages en « ancres douces », où le navigateur fait défiler doucement la page jusqu’à l’ancre. Ainsi le lecteur sait en permanence où il se trouve dans la page, et peut plus facilement remonter, etc.

On peut voir ce plugin en action sur le site des blogs du Monde diplo (cliquer sur « XX commentaires » ou sur les appels de note, par exemple).

Ce plugin est une intégration à SPIP de deux scripts jQuery d’Ariel Flesler, avec lesquels il est possible de faire plein d’autres jolis scrolls (voir les démos) :
— localScroll
— scrollTo

Restreindre ancres_douces à certains blocs

Si vous utilisez d’autres scripts javascripts utilisant aussi les ancres (par exemple un slider jquery), il est possible que des interférences se produisent avec ancres_douces.

Pour éviter ces interférences, il est nécessaire d’indiquer sur quel bloc ou quels types de blocs on veut restreindre le fonctionnement de ancres_douces.

Pour cela, on doit définir dans mes_options.php la constante « CONTEXTE_ANCRES_DOUCES ».

Exemple :
-  Pour restreindre au bloc d’id contenu (convient sur un grand nombre de squelettes spip ) :

define ('CONTEXTE_ANCRES_DOUCES','#contenu');


-  pour restreindre à tous les éléments de classe « ancres_douces »

define ('CONTEXTE_ANCRES_DOUCES','.ancres_douces');

Bugs connus :
-  fonctionne mal avec Opera. (corrigé en 1.2)

À noter, le plugin Ancres douces est aussi intégré sous forme d’une lame du Couteau suisse.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

36 discussions

  • E-cosystems

    Bonjour,

    J’utilise les ancres douces, bah, parce que c’est joli ;)

    J’essaye de travailler un maximum l’accessibilité pour les personnes handicapées et j’ai un soucis avec les ancres douces.

    Lorsqu’elles sont activées, les liens vers le contenu, menu... se font biens.
    Par contre, pas moyen de naviguer avec la touche « tab ». Celle-ci renvoie vers le menu d’accessibilité.

    Du coup, je les ai désactivées.

    Évidemment, la touche « tab » marche bien quand les ancres ne sont pas activées.

    Bonne journée à tous le monde et un grand merci à tous les contributrices et contributeurs !

    Répondre à ce message

  • gregol

    Bonjour,
    Je voulais savoir comment faire pour que l’Ancre Douce fonctionne avec des retours sur la page précédente. (pas la même page)

    Processus :
    1- J’ai une page qui présente une liste de mes articles.
    2- Je descend dans ma page et sélectionne un article.
    3- Je suis maintenant sur ma page de l’article sur laquelle il y a une bouton « menu » avec une ancre :

    <a href="[(#URL_RUBRIQUE|ancre_url{#URL_ARTICLE})]" class="back">< menu</a> 
]

    4- Je retourne par le bouton « rmenu », l’ancrage se fait bien mais sans douceur !

    Pourquoi ? Comment ?
    Quelqu’un peut-il me donner un indice ?

    A bientôt,
    G

    Répondre à ce message

  • Pierre

    Bonjour !
    Utilisé chez moi sous depuis le couteau suisse, je remarque un soucis avec la navigation au clavier : quand les ancres douces sont activées, si je tabule dans la page, par ex. je passe par un lien d’évitement (du style « aller à la recherche » avec comme cible l’id d’une div, d’une liste ou d’autre chose :

    • ma page descend bien jusque cet élément
    • mon url contient bien #recherche
    • mais à la tabulation suivant, je me retrouve de nouveau en haut après mon premier lien d’évitement, ce qui est très génant
    • Je ne vous raconte pas avec une synthése vocale, dans lequel cas cela les liens du sommaire et d’évitement ne servent hélàs à rien

    Si je rajoute « en dur » #recherche dans l’url et que je valide, cela fonctionne, même si le plugin est activé. J’ai essayé de mettre les liens en absolu, cela ne fonctionne pas plus...

    Quelqu’un à t’il une idée pour que le focus clavier suive les liens ? Je ne connais pas bien javascript hélàs...

    Répondre à ce message

  • Serg

    Bonjour. Ce plugin améliore bien la navigation avec les ancres dans un même article. J’ai juste un petit défaut que j’aimerai supprimer. Voilà, j’ai réalisé un article avec un sommaire et des titres. L’article étant très long, je navigue avec le sommaire (réalisé automatiquement avec le plugin inter-titre) dans l’article en utilisant les ancres sur les titres présents tout au long de l’article. La première navigation, c’est à dire le premier clic sur un titre du sommaire m’amène bien sur le titre dans le corps de l’article, mais sans l’effet ancre douce. Par contre toutes les autres navigations après la première s’effectue avec l’éffet d’ancre douce. Même problème pour tous les autres articles.

    J’ai essayé d’activer le plugin intertitre avant et après le plugin ancre douce. Rien n’y a fait.

    Si quelqu’un peut m’aider, je le remercie d’avance

    Ma config :
    Spip2.1, php5, CFG Sarka3.0 Notation Jeux Bonux zengarden ArticlePDF Boutondansletexte Mediatheque Lecteur Rainette corbeille Saisies francybox splickbox snippets odt2 mesfichiers facteur sauvegardeauto Nycoceros,Intertitres hiérarchisés,ancre douce

    Hébergé chez free

    Répondre à ce message

  • Stéphane Deschamps

    @Fil,

    J’ai fait un checkout, bien sûr c’est super pas simple et pas de return(false) à portée de main.

    En revanche j’ai l’impression que ça se joue sans doute aux lignes 92-94 de jquery.localscroll.js mais je ne veux pas committer n’importe quoi donc je suggère ici la modification :

    $target
	.scrollTo( elem, settings )//do scroll
	.trigger('notify.serialScroll',[elem])//notify serialScroll about this change
	.void(0);//enable a BACK in keyboard browsing mode

    L’avis de quelqu’un de plus versé que moi en jQuery serait grandement bienvenu...

    Répondre à ce message

  • Stéphane Deschamps

    @Fil,

    ça fait bien longtemps que je n’ai pas fait ça, je te fais signe si je n’y arrive pas...

    Répondre à ce message

  • 1
    Stéphane Deschamps

    Bonjour à tous,

    Mon souci de navigation au clavier a été résolu là : hmtlzengarden, ancres douces.

    il suffit de remplacer return (false) par void(0)

    Répondre à ce message

  • Casp

    Help svp :/
    j’aimerai vraiment utiliser ce plugin .. mais dès que j’active ancre douce du couteau suisse. Mes ancres ne fonctionnent plus du tout :/ il ne se passe rien quand je clic dessus.
    Si je desactive le pugin elle remarche normalement...

    je suis sous spip 1.9.2c j’ai installer le pugin jquery192, et ma page on bien un doctype XHTML du style.

    Si vous voulez voir une page pour le code allez ici :
    http://www.casalonga.com/-Obtenir-des-droits-?&lang=fr

    Je comprend pas pourquoi ca bloque ... si quelqun a une idée

    Répondre à ce message

  • j’ai également des soucis pour faire fonctionner ce plugin avec spip 2.0.9

    la balise #INSERT_HEAD est bien inséré, je n’ai aucun probleme avec mes autres plugins qui fonctionnent tous parfaitement sauf celui ci étrange .... et dommage

    Répondre à ce message

  • 1

    y’a-t-il du code à introduire dans le squelette pour que le plug-in marche ?
    faut-il faire quelque chose de particulier au niveau syntaxe spip pour que les ancres fonctionnent ?
    y a-t-il une doc ?

    Merci de votre aide

    • Caracalla

      J’ai le même problème lorsque j’utilise ce plugin en local : ça ne marche pas. Ça ne marche pas non plus dans le couteau suisse ...
      Dommage !

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom