SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 312 visiteurs en ce moment

Accueil > Navigation > Hyperliens > Ancres douces > Ancres douces

Ancres douces

21 octobre 2008 – par Fil, _Eric_ – 54 commentaires

24 votes

Partout sur le Web, lorsqu’on clique sur un lien qui mène vers une ancre dans la même page, 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 ) :

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


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

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

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

Voir en ligne : http://plugins.spip.net/ancresdouces

P.-S.

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

Dernière modification de cette page le 1er avril 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 1er février 2009 à 17:18, par dinobib En réponse à : Ancres douces

    Bonjour,

    le plugin fonctionne bien en spip1.9.2e avec plugin jquery1.9.2.
    Par contre l’intérêt que je voyais dans ce plugin, était de me sortir d’un problème de mise en page.

    Ayant un header fixe et ma page qui commence dessous, les ancres normales redirige bien au renvoi mais par rapport au haut de la page qui est du coup caché par mon header fixe.

    J’aurais donc voulu modifier ce plugin afin qu’il me permette de rediriger vers l’ancre +tant de pixel. Comment cela est-t’il possible ? J’ai essayé de modifié scrollto.js sans succès. Il me faudrait rajouter 82px pour que l’ancre renvoie bien à la première portion visible.

    Merci d’avance

    • Le 1er février 2009 à 18:05, par dinobib En réponse à : Ancres douces

      J’ai trouvé ceci comme info

      http://flesler.blogspot.com/2007/10/jqueryscrollto.html

      il semble que ce que je cherche soit possible par le paramètre offset mais je ne le trouve nulle part dans le plugin et n’y connaissan rien, je ne réussi pas à l’ajouter. Voici ce que j’ai testé

      ;(function( $ ){
             
              var $scrollTo = $.scrollTo = function( target, offset, duration, settings ){
                      $(window).scrollTo( target, offset, duration, settings );
              };

              $scrollTo.defaults = {
                      top:82,
                      axis:'y',
                      duration:1
              };

      comment faire passer ce paramètre offset. Merci

    • Le 11 février 2009 à 02:57, par dinobib En réponse à : Ancres douces

      Il semble que le plugin ancres douces utilise les fonctions de base des plugins scroolTo et localTo. Il ne me semble pas possible de lui faire passer des paramètres optionnels mis à part en les écrivant en dur dans les liens dans le squelettes.
      Ais-je tort ?

    • Le 16 novembre 2016 à 11:44, par Yohooo En réponse à : Ancres douces

      Cette demande date, mais je n’ai pas trouvé d’autre moyen pour répondre à une problématique similaire que de surcharger le script jquery.localscroll.js en y ajoutant un paramètre « offset » ligne 46.

    • Le 9 mai à 13:48, par graphie En réponse à : Ancres douces

      Bonjour Yohoo,

      Voici ce qui est indiqué dans jquery.localscroll.js l. 38 :

      1. // The defaults are public and can be overriden.

      Il faut peut-être ajouter la valeur d’offset dans ton js.perso :

      1. $localScroll.defaults = {
      2. offset:85
      3. }

      Télécharger

    • Le 9 mai à 19:11, par graphie En réponse à : Ancres douces

      Ben vouai, on peut y arriver comme ça :

      1. $.extend($.localScroll.defaults, {
      2. duration:1500
      3. });
      4. $.extend($.scrollTo.defaults, {
      5. offset:-50
      6. });

      Télécharger

      https://github.com/flesler/jquery.scrollTo#changing-the-default-settings

    • Le 9 mai à 21:48, par graphie En réponse à : Ancres douces

      En plus souple amha :

      1. $.localScroll.defaults.duration = 1700;
      2. $.scrollTo.defaults.offset = -85;

      Télécharger

    Répondre à ce message

  • Le 10 juillet 2015 à 17:38, par tcharlss En réponse à : Ancres douces

    Dans le cas où il y a des conflits javascript, je trouve plus simple de prendre le problème à l’envers : garder les ancres douces partout, et désactiver sur certains blocs ponctuellement.

    Dans ce cas, je rajoute la classe « no-ancres-douces » là où ça pose poroblème, et dans mes_options.php :

    1. <code>define ('ANCRES_DOUCES_CONTEXTE',':not(.no_ancres_douces)');</code>
    • Le 10 juillet 2015 à 18:02, par tcharlss En réponse à : Ancres douces

      Oups, j’ai parlé trop vite, ça ne fonctionne pas ainsi. Et la bonne valeur c’est CONTEXTE_ANCRES_DOUCES.

    • Le 15 juin 2016 à 14:25, par jeanmarie En réponse à : Ancres douces

      C’est corrigé dans la doc...

    Répondre à ce message

  • Le 19 février 2016 à 20:36, par Djan En réponse à : Ancres douces

    Ça serait possible d’activer aussi les ancres douces pour le reste du squelette ?
    Par exemple pour #top ?

    Répondre à ce message

  • Le 24 octobre 2008 à 10:11, par ZiWaM En réponse à : Ancres douces

    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 ?

    • Le 24 octobre 2008 à 11:44, par Fil En réponse à : Ancres douces

      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.

    • Le 7 juin 2009 à 16:27, par ? En réponse à : Ancres douces light

      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

    • Le 15 décembre 2015 à 19:53, par laetitia En réponse à : Ancres douces

      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

    • Le 15 décembre 2015 à 23:39, par Fil En réponse à : Ancres douces

      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

  • Le 19 mars 2013 à 15:31, par Matthieu En réponse à : Ancres douces

    Bonjour

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

    j’utilise spip 3

    merci

    Répondre à ce message

  • Le 18 septembre 2012 à 11:46, par Julien En réponse à : Ancres douces

    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 !

    • Le 24 octobre 2012 à 07:22, par chris En réponse à : Ancres douces

      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

  • Le 1er août 2012 à 11:20, par scalp En réponse à : Ancres douces

    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

  • Le 1er août 2012 à 11:18, par scalp En réponse à : Ancres douces

    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

  • Le 1er août 2012 à 11:16, par scalp En réponse à : Ancres douces

    Bonjour est-il possible d’adapter les ancres douces, (dans l’idée de faire un slide) sur le système de pagination de spip ?

    D’avance merci

    Répondre à ce message

  • Le 15 juillet 2012 à 09:31, par chris En réponse à : Ancres douces

    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 ?

    • Le 15 juillet 2012 à 10:58, par chris En réponse à : Ancres douces

      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

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Le plugin ZotSpip

    28 mai 2012 – 138 commentaires

    Synchronise Spip avec une bibliothèque (personnelle ou partagée) de références bibliographiques Zotero. Utilisez Zotero pour gérer / importer / rédiger vos références bibliographiques, puis incorporez vos références bibliographiques dans votre Spip avec (...)

  • ScolaSPIP 4

    19 janvier 2016 – 213 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • MediaBox

    10 mai 2010 – 514 commentaires

    Avertissement Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1. Aperçu La MediaBox est une Boîte multimédia polyvalente et (...)

  • Sommaire automatique

    31 janvier 2013 – 14 commentaires

    Ce plugin repère les intertitres des textes de vos articles et s’en sert pour génèrer un sommaire. Ce dernier peut être inséré automatiquement au début de chaque article, ou utilisé dans les squelettes pour générer un sommaire sur n’importe quel autre (...)

  • La Fabrique

    20 avril 2012 – 316 commentaires

    La Fabrique est un outil pour webmestres ou développeurs qui souhaitent créer des plugins. La Fabrique est capable de générer le code source minimal d’un plugin pour SPIP 3 (elle accélère donc le démarrage d’un plugin) et peut s’occuper également de (...)

Ça spipe par là