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

  • 4
    ZiWaM

    Bonjour,

    En ce qui concerne les défilements horizontaux ou en diagonale je comprends mais pour le simple défilement vertical 2 plugins jQuery additionnels ça me semble faire beaucoup. En ajoutant ce bout de code on parvient au même effet :

    $(document).ready(function(){
$('a[href*=#]').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
  && location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length && $target
    || $('[name=' + this.hash.slice(1) +']');
    if ($target.length) {
      var targetOffset = $target.offset().top;
      $('html,body')
      .animate({scrollTop: targetOffset}, 1000);
     return false;
    }
  }
});

});

    N’y a t’il pas moyen d’ajouter un niveau de base au plugin, ce niveau ne nécessiterait pas l’import des 2 fichiers JS supplémentaires et ça permettrait de cumuler tous les effets ?

    • Fil

      Super ! Je l’adapte un peu (pour afficher le hash dans la barre d’url à la fin du défilement), et je l’adopte ! Merci.

    • il s’agit en fait du script de Karl Swedberg ayant inspiré le plugin ScrollTo d’Ariel Flesler, cf. http://www.learningjquery.com/2007/....

      Avec le patch pour opera et safari ça donne :

      $(document).ready(function(){
$('a[href*=#]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
   var $target = $(this.hash);
   $target = $target.length && $target
   || $('[name=' + this.hash.slice(1) +']');
   if ($target.length) {
     var targetOffset = $target.offset().top;
     if($.browser.safari) {
              $('body')
     .animate({scrollTop: targetOffset}, 1000);
    return false;
          } else {
             $('html')
     .animate({scrollTop: targetOffset}, 1000);
    return false;
          }
   }
 }
});

});

      testé avec ies4mac, opera, safari et firefox sur mac

    • laetitia

      Bonsoir à tous,

      et à Fil en particulier, tu m’intéresses beaucoup quand tu parles d’afficher le hash dans la barre d’url à la fin du défilement.

      Tu peux expliquer ?
      Merci d’avance

    • Fil

      Un commentaire datant d’il y a 7 ans, j’avoue que j’ai oublié de quoi il s’agissait. Désolé

    Répondre à ce message

  • Matthieu

    Bonjour

    Ancres douces fonctionne sans pb sur mozilla, par contre pas du tout sur ie8

    j’utilise spip 3

    merci

    Répondre à ce message

  • 1
    Julien

    Bonjour,

    J’ai un souci avec le plugin. J’essaye désespérément de restreindre mes ancres douces pour qu’il évite d’agir sur un slideshow présent sur ma page. Mais rien n’y fait.

    J’ai un slideshow qui utilise des ancres pour faire défiler mes panels. Seulement chaque fois que je clique sur suivant/précédent, bien évidement le scroll vient se caler au niveau du slideshow alors que c’est pas voulu du tout.

    J’aimerais utiliser mes ancres douces uniquement pour mes news qui se trouve dans une div avec la classe « news ». J’ai bien essayé la fonction a mettre dans « mes_options.php » mais ça ne change rien.

    <?php
define (’ANCRES_DOUCES_CONTEXTE’,’news’) ;
?>

    Je veux bien un peu d’aide, merci !

    • chris

      Pour que l’ancre douce du plugin « Ancres douces » ne s’appplique pas au slider, il suffit de remplacer :

      var $localScroll = $.localScroll = function( settings )
      $(’body’).localScroll( settings ) ;
       ;
      par

      var $localScroll = $.localScroll = function( settings )
      $(’.news’).localScroll( settings ) ;
       ;
      dans jquery.localscroll.js du plug.

    Répondre à ce message

  • scalp

    Bonjour est-il possible d’adapter les ancres douces au système de pagination de skip dans l’idée de faire un slide ?

    Répondre à ce message

  • scalp

    Bonjour,
    Est-il possible d’adapter les ancres douces au système de pagination de spip dans l’idée de faire un slide ?
    D’avance merci.

    Répondre à ce message

  • 1
    chris

    Bonjour, dans spip 3, je rajoute le code

    <?php
define(’CONTEXTE_ANCRES_DOUCES','#une-grosse-colonne’);
?>

    dans config/mes options.php et quand je recharche ma page publique j’ai une alerte

    Parse error : syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home2/machin/public_html/tagada/config/mes_options.php on line 10

    Une idée ?

    • chris

      Solution :
      Ne pas modifier le fichier mes_options.php mais dans jquery.localscroll.js

      remplacer

      var $localScroll = $.localScroll = function( settings ){
	$('body').localScroll( settings );
};

      par

      var $localScroll = $.localScroll = function( settings ){
	$('#une-grosse-colonne').localScroll( settings );
};

    Répondre à ce message

  • 1
    Gil FOURGEAUD

    Bonjour,

    Les ancres douces ne fonctionnent pas avec du Rewrite url chez moi ...

    /?page=rubrique&id_rubrique=7 fonctionne

    rubrique/article ne fonctionne pas

    Merci

    • Yohooo

      Ce n’est pas « ancre douce » qui ne fonctionne pas, Mais l’ensemble les ancres de Spip qui ne fonctionnent pas avec un rewrite URL.

    Répondre à ce message

  • 1
    Julien

    Bonjour,

    j’ai mis dans config/mes_options.php :

    <?php
define (’ANCRES_DOUCES_CONTEXTE’,'ancres_douce’) ; 
>

    Et j’ai affecté la class « ancres_douce » à certains éléments div de mon squelette mais cela ne marche pas. Cela agi sur tout la page !

    Une idée ?

    Merci beaucoup

    • Christian

      Il y a une erreur dans les exemples avec CONTEXTE_ANCRES_DOUCES !
      il est indiqué :

      define (’ANCRES_DOUCES_CONTEXTE','ancres_douce’) ;

      alors qu’il faut :

      define (’CONTEXTE_ANCRES_DOUCES','ancres_douce’) ;

    Répondre à ce message

  • junthro

    Bonjour,
    j’ai un problème avec le plugin Ancres Douces sur Spip 2.1.8 : le défilement fonctionne sans problème lorsque je suis loggé en admin, mais si je me déconnecte un message s’affiche :

    Fatal error : Call to undefined function : url_absolue() in .... plugins/auto/ancres_douces/ancres_douces_pipelines.php on line 5

    Précision : le Couteau Suisse est installé (indispensable), mais sa fonction « ancres douces » est désactivée. Inversement, lorsque je désactive le plugin Ancres Douces pour n’activer que la fonction du Couteau Suisse, le défilement doux ne s’opère pas. Et lorsque les deux sont activées : message d’erreur du plugin.

    Et sinon mes pages sont en DOCTYPE XHTML transitional.

    Ne voyant pas à quelle URL absolue il est fait allusion dans le pipeline.php, et ne connaissant rien non plus au javascript (cf jquery.scrollto.js), vos éclaircissements sont les bienvenus...

    Répondre à ce message

  • 4
    JLuc

    Hello,

    ce plugin fait des scrolls doux pour TOUTES les ancres douces. Or parfois, avec un autre plugin de diaporama ou de slider à onglets par exemple, on ne veut PAS que la fenêtre scrolle automatiquement lorsqu’on clique sur les thumbnails des pĥotos ou sur les onglets.

    Y a t il un moyen d’exclure un lot d’ancres nommées du scroll doux ?
    par exemple exclure les ancres commençant par ’onglet-’, ou au contraire, ne retenir que celles qui commencent par ’ancredouces-’...

    • JLuc

      Peut être serait il plus facile d’exclure toutes les ancres qui sont à l’intérieur d’un <div>, par exemple, de classe exclusion_ancre_douce

    • JLuc

      En fait, le plugin localscroll utilisé dans ce plugin est déjà prévu pour limiter les scrolls doux aux ancres dans un élément. L’exemple donné est :
      $('#navigation').localScroll();

      L’objectif visé n’est donc pas immensément lointain...

    • JLuc

      mais ça ne scrolle plus doux si je modifie le javascript ainsi... donc je ne sais plus comment faire.

    • JLuc

      La fonctionnalité est intégrée au plugin et documentée. Configuration basique par le mes_options.php

    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